如何在保持宽高比的同时使图像紧贴在 Div 内？

保持 Div 内图像的长宽比

问题：

如何将图像紧贴在 div 内元素，同时保留其纵横比，确保图像的任何部分都不会被裁剪或扭曲？

答案：

要使用 CSS 实现此目的，请利用以下属性：

img {
  max-height: 100%;
  max-width: 100%;
}

1. max-height: 100%;：将图像的最大高度设置为其容器 div 的 100%。这可以确保图像不会溢出 div 的高度。
2. max-width: 100%;：与 max-height 类似，但针对宽度。这会将图像的最大宽度设置为其容器 div 的 100%。

说明：

通过组合这两个属性，图像将有效收缩以适应 div，同时保持其原始纵横比。图像将按比例缩小，确保没有任何部分被裁剪或扭曲。

附加说明：

1. 如果您想让图像在 div 内居中，添加以下 CSS 属性：

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 或者，您可以使用 object-fit 属性来实现类似的结果，尽管并非所有浏览器都支持它。

以上是如何在保持宽高比的同时使图像紧贴在 Div 内？的详细内容。更多信息请关注PHP中文网其他相关文章！