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.
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.
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.
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.
