如何在 CSS Flexbox 中保留圖片長寬比？

在 Flexbox 中保持圖像長寬比

在 CSS Flexbox 模型中，調整圖像高度時保持圖像比例可能是一個挑戰。但是，有多種方法可以實現此目的。

物件適合屬性

一種方法是在影像上使用物件適合屬性。透過設定 object-fit: contains，映像將縮放以適合其目標容器，同時保留其寬高比。

Flex 特定規則

另一個選項是使用特定於Flex 的規則：

• 設定align-self: center 以將影像在其父級中垂直居中
• 設定flex: 0 0 auto使影像的寬度和高度靈活，允許其根據需要縮小或擴展。

範例

這是一個呈現兩者的範例方法：

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

此方法應該有效保留影像的縱橫比，即使在調整影像高度時也是如此。

以上是如何在 CSS Flexbox 中保留圖片長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！