Shrink Image to fit flex column

Question

I have a image that I would like to shrink in a flexbox column layout. I have read a bunch of pertinent threads but I still can't figure it out.

I want the right column to always have the same height of the left column and the image in the right column to fill the height of the remaining space not taken up by the text. Any thoughts? Thank you!

I would like it to look like this:

Codepen here: https://codepen.io/interzonestudio/pen/qBRPxzg

This is my HTML:

<div class="block-one">
    <div class="block-one-left">
        <img src="https://via.placeholder.com/300x400" alt="">
    </div>
    <div class="block-one-right">
        <div class="block-one-right-top">
           <img src="https://via.placeholder.com/300x400?text=Shrink+Me!" alt="">
        </div>
        <div class="block-one-right-bottom">
            <p>Lorem ipsum dolor sit amet, consectetuer diiscing elit, sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p>
        </div>
    </div>
</div>

and this is my CSS:

.block-one {
    width: 50%;
    padding: 50px;
    background: #9ac1e4;
    margin: 0 50px 100px 50px;
    display: flex;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
}

.block-one-left {
    width: 40%;
    padding-right: 50px;
}

.block-one-left img {
    width: 100%;
}

.block-one-right {
    width: 60%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.block-one-right-top {
    height: 100%;
    flex: 1;
}

.block-one-right-top img {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    width: auto;
    object-fit: contain;
}

Answer 1

You can achieve this with a tiny piece of javascript to calculate the difference of left img height minus text height and set the right image height to that difference. Just place these 4 lines javascript in a <script></script> -tag just before the closing body tag.

Working example:

 var max_height = document.querySelector('.block-one-left').clientHeight; var text_height = document.querySelector('.block-one-right-bottom').clientHeight; var shrink_height = max_height - text_height; document.querySelector('.block-one-right-top').style.height = shrink_height + 'px';

 * { margin: 0; padding: 0; box-sizing: border-box; }.block-one { display: flex; width: 600px; margin: 0 50px 100px 50px; padding: 25px; background: #9ac1e4; }.block-one-left { height: 300px; margin-right: 25px; }.block-one-left img { height: 100%; }.block-one-right { width: 225px; }.block-one-right-top img { height: 100%; }.block-one-right-bottom { padding-top: 25px; }

 <div class="block-one"> <div class="block-one-left"> <img src="https://via.placeholder.com/300x400" alt=""> </div> <div class="block-one-right"> <div class="block-one-right-top"> <img src="https://via.placeholder.com/300x400?text=Shrink+Me," alt=""> </div> <div class="block-one-right-bottom"> <p>Lorem ipsum dolor sit amet, consectetuer diiscing elit. sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p> </div> </div> </div>

---

If you want it to be responsive you have to wrap the 4 lines in a function. Because you have to listen for at least two events (image loaded and window resized) it is much cleaner to call the function instead of having the 4 lines twice in your code.

Working example:

 var left_img = document.querySelector('.block-one-left img'); function setHeight() { var max_height = left_img.clientHeight; var text_height = document.querySelector('.block-one-right-bottom').clientHeight; var shrink_height = max_height - text_height; document.querySelector('.block-one-right-top').style.height = shrink_height + 'px'; } left_img.addEventListener('load', setHeight); window.addEventListener('resize', setHeight);

 * { margin: 0; padding: 0; box-sizing: border-box; }.block-one { display: flex; width: 100%; padding: 25px; background: #9ac1e4; }.block-one-left { width: 40%; margin-right: 25px; }.block-one-left img { width: 100%; }.block-one-right { width: 50%; }.block-one-right-top img { height: 100%; }.block-one-right-bottom { padding-top: 25px; }

 <div class="block-one"> <div class="block-one-left"> <img src="https://via.placeholder.com/300x400" alt=""> </div> <div class="block-one-right"> <div class="block-one-right-top"> <img src="https://via.placeholder.com/300x400?text=Shrink+Me," alt=""> </div> <div class="block-one-right-bottom"> <p>Lorem ipsum dolor sit amet, consectetuer diiscing elit. sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p> </div> </div> </div>