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