首頁 > web前端 > css教學 > 如何在 CSS 中使圖片按比例填充 Div?

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

Barbara Streisand
發布: 2024-12-03 17:19:09
原創
810 人瀏覽過

How to Make Images Proportionally Fill Divs in CSS?

如何在填充的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="my-image.jpg">
</div>
登入後複製

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板