Responsive image scaling: "height=100%" isn't working

http://www.mickposch.com/type_a_test.html

I’m trying to get the big image on this page to always fill the vertical space of its red container div. (I put temporary colored borders on the divs and grids so you can see what’s going on.)

In the image’s class (.main-image), I’ve got its height set to 100%. So that should make it scale vertically to fill the red div, no? Instead, the image always displays at its actual pixel dimensions.

If you delete the image and its div from the HTML section and just look at the colored borders, you can see what I’m trying to do…the red div always goes up to the top of the page leaving just a slight margin, and its bottom edge goes down to just above the caption. Everything works fine - on desktop, laptop, and phone (simulated in the Chrome dev tools) - until I put the image in.

I tried all combinations of different height, width, and other settings for the image and the red container, but nothing makes it behave right - something’s always getting cut off, or has other weirdness going on.

I believe I’ve already given a number of working examples of this :slight_smile:

You should get the effect you want with these additions.

.main-image  img{object-fit:cover;width:100%;height:100%;}
.main-image {display:flex;}

You have to make the flex children flex boxes as well if you want to maintain the equal height approach in that scenario. Height:100% is unreliable as it requires an unbroken chain of parents with a fixed height in order to work properly.

2 Likes

Yes you have…for which I am most grateful! :slightly_smiling_face:

But after I went and completed the site it was still bugging me the way things can get cut off at the top and bottom on some devices, so I’m going back to the drawing board. Thanks again for the new info…busy today but I’ll try it out as soon as I can.

1 Like

So here’s what I ended up doing:

http://www.mickposch.com/test_sitepoint_3-2-2021.html

The main image is now a background image inside a div, with background-size set to contain - so nothing gets cut off.

1 Like

If that’s what you want then it’s fine :slight_smile:

It’s not 100% high which is what you asked for originally but I guess you want the whole image displayed so you have to use contain instead.

Whatever you think works best :slight_smile:

1 Like

Yeah…the idea is to fill the maximum vertical height unless the width of the display is too narrow…then it has to prioritize displaying the entire image without cropping or stretching. It seemed like a simple thing to tackle, but it drove me crazy! Thanks again for the all the help. :grinning:

1 Like