Trying to make child div with image resize to it's parent div height

HTML-CSS
1

Greetings,

I’m trying to work up a design comp page with Bootstrap (side project, possible Tribute page) and I’m having a bit of a tough time setting a child div with an image to resize proportionally to the height of it’s parent div.

Here’s a pen for reference.

If you look at the colored blocks image on the left side of the page, I’d like to have this div and image resize their height proportionally to match their parent container div when the page is resized. Currently the overflow for the container div is set to hidden so the full colored blocks image isn’t being shown. I like how the rest of how the page is resizing for smaller viewports but unfortunately I’ve hit a road block with the resizing of this image.

After working on this for several days recoding it in various combinations and doing the Google research dance I’m starting to think that there probably isn’t an easy way to achieve this with only using CSS. Any direction or suggestions that anyone can give would be greatly appreciated.

Thanks!

2

Set your inner div height to 100%.
Be careful with an image though. It can get distorted…

3

Thanks for the suggestion but unfortunately that doesn’t work. I’ve tried that method before but because of your suggestion I applied it again but to no avail. I appreciate the suggestion though as I’m kind of flummoxed at this point. :thumbsup:

4

Try

max-height: 100%;

on the image.

5

Hell YEAH! That worked. Thank you so much for your help!!! :raised_hands::thumbsup:

1 Like