如何在填充的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中文網其他相關文章!