缩小图像以适应弹性列

Question

我有一张想在 flexbox 列布局中缩小的图像。 我已经阅读了一堆相关的线程，但我仍然无法弄清楚。

我希望右列始终与左列和右列中的图像具有相同的高度，以填充文本未占用的剩余空间的高度。 有什么想法吗？ 谢谢！

我希望它看起来像这样：

Codepen 在这里： https://codepen.io/interzonestudio/pen/qBRPxzg

这是我的 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>

这是我的 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

您可以使用一小块 javascript 来计算左侧图像高度减去文本高度的差值，并将右侧图像高度设置为该差值。 只需将这 4 行 javascript 放在<script></script> -tag 中，就在结束 body 标记之前。

工作示例：

 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>

---

如果您希望它具有响应性，则必须将 4 行包装在 function 中。 因为您必须至少监听两个事件（图像加载和 window 调整大小），所以调用 function 而不是在代码中使用 4 行两次要干净得多。

工作示例：

 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>