高度功能是什么：这里自动？

Question

我似乎无法确定height:auto;在这里做什么。

img {
  max-width: 100%;
  display: block;
  height: auto;
}

此代码来自以下链接：https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

Answer 1

height: auto;用于让浏览器根据图像的纵横比调整图像的高度。

Answer 2

如文章所述：“ auto的height属性保持图像的原始纵横比。”

图像将保留原始图像的宽高比，并调整容器的大小。

例如：

• 图片宽500像素x高250像素
• 纵横比为2（500/250）
• 容器的最大宽度为200px
• 您将获得一张宽度为200px，高度为100px的图像

还请注意，如果原始图像小于容器，则将无法完全容纳原始图像，而仅显示原始图像。