如何使用 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中文网其他相关文章！