如何使用 CSS 保留 Div 內的圖片長寬比？

保留 Div 內影像的寬高比

通常，希望在保持其寬高比的同時在 div 內顯示影像。這確保了影像完全可見，沒有任何失真。為此，您可以利用特定的 CSS 屬性。

使用CSS 的解決方案：

在放置映像的div 內，將下列CSS 規則新增至圖片element:

max-height: 100%;
max-width: 100%;

這些CSS屬性指示瀏覽器將圖片的尺寸限制在div的邊界內。 max-height 屬性限制垂直尺寸，而 max-width 限制水平尺寸。透過將這兩個屬性設為 100%，影像會縮小以適合 div，同時保留其原始縱橫比。

範例：

<div class="image-container">
  <img src="image.jpg" />
</div>

.image-container {
  width: 48px;
  height: 48px;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

此範例會將 48x48 影像放入 48x48 div 中，同時保持影像的縱橫比。影像將調整大小以在 div 內完全顯示，而不會出現任何裁剪或變形。

以上是如何使用 CSS 保留 Div 內的圖片長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！