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.