I tested this page in Chrome’s dev tools and I thought I had it working cross-platform, but now I realize that on certain screen sizes - like a laptop with a 1366 x 768 screen size - it will be cropped of at the bottom and require scrolling. Is there a way to basically tell it to always scale the content vertically to fit the browser window - so that the entire image is always visible without scrolling? (The colored borders are temporary to make it easier to see what’s going on).
The object-fit property can be used to contain an image within its container’s size.
If the container’s size is also constrained by vh (viewport height) units, the image will be constrained within the visible window size.
3 Likes
The page wasn’t actually designed that way as I believe you wanted it centred vertically if there was room. You can add a fix by setting a max height on the image to 100vh (vh = viewport height) or a bit smaller if you want some text to show underneath.
However that means the image will lose its aspect ratio so you will need to use either cover as in the following example or contain as in Sams example.
.main-image img{
max-height:90vh;/* 100h would be full viewport height if you didn't want to see text below*/
object-fit:cover;/* use contain if you need to see all the image but the width will shrink*/
}
‘cover’ will cover the whole area width and height and still maintain the images aspect ratio. However in order to do this the width and height of the image are increased uniformly until the whole area is filled and then cropped to fit.
‘contain’ on the other hand will contain the image in the area required but will not fill the whole area so you will get gaps around 2 edges of the image (unless the space just happens to be the exact same aspect ratio of the image which is highly unlikely).
1 Like
Yes that is possible but imagine the following situation. At present your image displays like this on an iphone.
Now imagine you made it stretch to the bottom and then it would look like this:
You have to be careful what you ask for 
2 Likes
Thanks…I’ll play around with it some more.
Oh yeah, good point about the Iphone. It’s doing pretty much what I want it to do on mobile, it’s just the cropping on a 1366 x 768 laptop that’s bugging me. Maybe I just have to live with the scrolling. Most of my web development work was many years ago - Dreamweaver, tables, and even (shudder!) APDivs at one point! - so it’s hard to wrap my head around responsive design.
1 Like
Try the code I gave above
It uses a max-height so only takes effect when the image is close to viewport height. It won’t really affect the smaller devices.
I ended up just shrinking the main image down a little and now it works on any device sim I’ve tested it on…so all’s good for now. I’ll post a link when the site’s finished (although I’m sure I’ll be back with more questions before then!) 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.