如何在允許靈活高度的同時保留 CSS Flexbox 中的圖像長寬比？

透過靈活的高度保留影像長寬比

在CSS彈性盒模型中，影像經常拉伸或收縮以填充其容器的寬度。調整高度時保持縱橫比可能是一個挑戰。為了解決這個問題，讓我們探索有效的解決方案。

一種解決方案是在影像元素上利用物件擬合：

object-fit: contain;

此屬性指示瀏覽器將影像包含在指定空間內同時保留其比例。您可以在 http://jsfiddle.net/ykw3sfjd/ 查看實例。

或者，可以使用特定的 flex 屬性：

align-self: center;
flex: 0 0 auto;

align-self 確保圖像是垂直的在父元素中居中，而 flex: 0 0 auto 控制圖像的增長行為。它可以防止影像拉伸以填充可用高度，從而保持其縱橫比。

以上是如何在允許靈活高度的同時保留 CSS Flexbox 中的圖像長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！