保留 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中文網其他相關文章！
