如何使用 Flexbox 使影像填充 Div，同時保持其長寬比？

在 Div 中按比例進行圖像填充

您的目標是用圖像填充 div，同時保留圖像的寬高比。與先前的線程不同，您希望圖像始終填充 div，無論方向如何。

解決方案：Flexbox

為了實現這一點，我們可以利用CSS flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

說明：說明：

• 設定容器div顯示：flex並將其內容置中。
• 指定flex-影像上的shrink: 0以防止其縮小。
• 設定最小寬度： 100% 和 min-height: 100% 以確保影像填滿 div。

範例：

<div class="container">
  <img src="some-image.jpg" alt="Could be portrait or landscape">
</div>

結果是填滿影像div 同時保留其縱橫比。無論是肖像還是風景，圖像都會佔據整個空間。

以上是如何使用 Flexbox 使影像填充 Div，同時保持其長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！