Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Responsive full screen/div images with cropping

Discussion in 'Website Coding & Programming Forum:' started by Levi, Aug 7, 2014.

  1. Levi

    Levi Moderator Staff Member

    Looking for the best technique for a full screen image that is responsive and crops vertically/horizontally if too tall/wide. There is a caveat in that I want it to change to a 'normal' full width image when on mobiles so it has to be in it's own div rather than a 'body' background image.

    Would I be right in thinking the simplest is the div with background inside another div with overflow hidden and offset if needed.

    I'd guess there's javascript too but want to stay away from that if possible :)

    Ta very :)

    Also as a side note: is it ok, ie not outdated, to use css table and table cells to centre text vertically and horizontally?
     
  2. FranciscoMachado

    FranciscoMachado New Member

    Hi Levi

    If you can do without the <img> html tag this can help:

    html, body {
    height:100%; width:100%;
    margin:0;
    }
    body {
    background-image: url(http://oi48.tinypic.com/2u9ij51.jpg);
    background-position:center;
    background-repeat: no-repeat;
    background-size:cover;
    }
    @media screen and (max-width:580px){
    body {
    background-size:contain
    }
    }
    http://codepen.io/FranciscoMachadoWebSolutions/pen/sjknq


    I cannot think of any problem with using the "display" property with "table*" values. But you still have to crop them and that is not solved by this approach unless I am missing something.

    Alternatively what you could do is something like this to the same effect and with the same problems using "vertical-align" and "line-height":
    Code:
    div.on { 
    		height:300px; width:300px; 
    		line-height:300px;
    		text-align:center;
    	}
    	div.on img { height:50%; vertical-align:middle;}
    Code:
    <div class="on">
    	&nbsp;<img src="http://oi48.tinypic.com/2u9ij51.jpg" />&nbsp;
    </div>
    * the "&nbsp;" are there because in some browsers it does not work unless there is some text with the image to align with.

    The not so subtle (more markup) cropping solution using the <img> tag is using multiple divs for positioning and cropping taking advantage of the "position:absolute" and "overflow:hidden" properties.

    I think that the best way of doing this is using background properties.

    Let me know if this helps
     
    Levi likes this.
  3. Levi

    Levi Moderator Staff Member

    thanks for the response, I went for a 'background image' approach although I've left the background image address as an inline style in the html instead of in the css file, it's different on each page but the rest of the settings are the same so this made sense although I am thinking of making each an individual class and using the css if it uses less code.

    The table question was more in relation to having centred text overlaying a responsive image which obviously changes size meaning I couldn't use set measurements.
     
  4. FranciscoMachado

    FranciscoMachado New Member

  5. Levi

    Levi Moderator Staff Member

    Sorry should have been a little clearer in my response about tables, I've already done it with tables so it was more of a check to see if it was ok, but it looks similar to yours although I've used classes instead of inline, so thanks again :).
     
  6. FranciscoMachado

    FranciscoMachado New Member

    No worries.
     

Share This Page