縮小圖像以適應彈性列

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>