When a heading and an image are nested inside a div, setting the image height to 100% makes the image fill the remaining space of the div. The div is indicated by a gray background. Example:
Now wrap the image inside another div, whose height is 100%. The image height now behaves strangely and juts outside the original, outer div:
I have this example set up with the following structure:
What I want: I want the image in the bottom example to fill the remaining vertical space in Outer Div while maintaining the image’s proportions and without overflowing outside Outer Div.
In the bottom example, it appears that when nested in Inner Div, the image with 100% height gets Inner Div’s height, which is also set to 100% and therefore gets Outer Div’s height. So the image juts out the bottom of Outer Div because the text adds more height. But then why doesn’t the image jut out the bottom of the top example? The behavior seems inconsistent.
To make matters worse, this example behaves differently across Firefox and Chrome. Notice the top examples.
2nd Set the max-width of the image element as 18VH, so you do not need to change all new image width.
3rd in the Inner Div, set the image as image background as the print below, after that, give to the inner Div a width of 100% (so you can guarantee that any image with larger width will appear also)
Thanks for putting in the time to try out some solutions.
Solution 1
Solution 1 unfortunately isn’t responsive, so the container doesn’t fill the vertical space appropriately. The issue becomes especially evident when I add more text, and the image juts out the bottom of the Outer Div container.
Solution 2
Solution 2 has a more responsive approach but requires guesswork in such a way that changing the viewport makes the image overflow out the bottom of the Outer Div container.
Solution 3
I have tried this solution before, but another problem arises. If I want to add elements to the right-hand side of the image, the 100% width of the Inner Div container pushes the elements to the far right.
Working off solution 3
The best solution I’ve been able to come up with is a combination of solutions 2 and 3. My solution is to give Inner Div a background image, to set the height as 100%, and to set the width as some number svh. I don’t like this approach because (1) it’s guesswork and (2) it doesn’t scale to images with different proportions. This approach does, however, work on both Firefox and Chrome. Click this gif to see:
I’m open to improvements if you or anyone else has a clean solution.
