如何使用 Flexbox 保留影像縱橫比？

使用 Flexbox 強制影像長寬比：保持比例

在 Flexbox 佈局中，影像經常調整大小以填充其容器的寬度。雖然這種行為在許多情況下是可取的，但當您想要保持影像的原始寬高比時，它可能不適合。

考慮以下 HTML 和 CSS：

<div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

此程式碼建立一個包含三個圖片的滑桿，這些圖片可以拉伸或收縮以水平填充容器。

解決方案 1：使用object-fit

保持圖像寬高比的一種方法是使用 CSS object-fit 屬性。透過設定 object-fit: contains，您可以指示瀏覽器調整圖片大小，同時保留其比例。

.slider img {
    object-fit: contain;
}

此解決方案很簡單，並且在大多數情況下效果良好。

解 2：Flex 特定規則

另一種方法是使用 Flex 特定規則。透過設定align-self:center和flex:0 0 auto，您可以強制圖像垂直居中並在其容器內按比例調整大小。

.slider img {
    align-self: center;
    flex: 0 0 auto;
}

此方法可以讓您更好地控制影像定位，並且更適合特定的佈局要求。

以上是如何使用 Flexbox 保留影像縱橫比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！