Responsive full screen/div images with cropping

Levi

Levi

Ultimate 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?
 
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
 
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.
 
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 :).
 
You must log in or register to reply here.
Back
Top