如何在 CSS 中使圖片按比例填充 Div？

如何在填充的Div 中顯示比例圖像

在CSS 中，在div 中實現圖像的完美適應可能具有挑戰性，尤其是在以下情況下你想保留它們的縱橫比。這是一個用圖像填充div 同時保持比例的簡潔解決方案：

利用物件擬合

大多數現代瀏覽器支援object-fit 屬性，允許您控制影像如何在其容器內顯示。對於這種情況，您可以使用以下 CSS：

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contains 確保圖片填充容器，同時保持其原始比例。它還可以防止影像被裁剪或扭曲。

使用 Flexbox

另一種方法是使用 Flexbox。此技術可讓您在div 內居中並靈活調整影像大小，從而達到所需的效果：

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

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

在這種情況下，影像將始終填滿div 的可用高度或寬度，同時保持其縱橫比。

實作範例

要實現此解決方案，只需將適當的CSS 應用於包含影像：

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="如何在 CSS 中使圖片按比例填充 Div？" >
</div>

注意： 確保將div 上的溢出屬性設為隱藏，以防止影像溢出到其邊界之外。

以上是如何在 CSS 中使圖片按比例填充 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！