如何在保持縱橫比的同時用圖像按比例填充 Div？

按比例用圖像填充Div

在此線程中，用戶尋求用圖像填充div，同時保持寬高比，無論圖像方向如何。 div 隱藏了溢出，允許潛在的圖像裁剪。

要解決此問題，建議從影像中刪除寬度和高度屬性，以保留其自然的寬高比。然後可以使用 Flexbox 將圖像在 div 中居中。

這是實現此目的的CSS 程式碼段：

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

以及對應的HTML 範例：

<div class="fill">
    <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/237/320/240" class="lazy" alt="">
</div>

此解決方案利用Flexbox 將影像置中並確保其填充div，保持其比例。

以上是如何在保持縱橫比的同時用圖像按比例填充 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！