为什么我需要“高度：自动”来响应图像？

Question

现在有必要定义height: auto天吗？原因是什么？

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

感谢。

Answer 1

在没有明确设置任何高度尺寸的图像上，它实际上默认为高度自动。因此，如果设置max-width: 100%;，浏览器将自动计算高度为正确的宽高比。

您可能会认为没有必要在css中将高度设置为auto，但真正的原因是如果在img元素上使用 height html属性设置了高度像这样：

<img src="#" height="500" />

虽然您可能没有明确地自己设置height属性，但我知道wordpress会为从媒体库中提取的图像设置height属性。

在这种情况下，如果您只将max-width设置为100％，则图像不会比包含元素宽，但宽高比会错误，图像最有可能会拉伸得更高。使用css height auto覆盖img标签高度属性。

这就是Bootstraps .img-responsive类设置height: auto;。

的原因

Answer 2

不，不是。

MDN's docs on height states:

  

初始值：自动

因此，默认情况下，height属性为{{1}}。

Answer 3

确保图像始终以原始宽高比显示。这是实现图像响应显示的常用技术。实际上，重要的部分是始终只将 width 或 height设置为auto以外的soemthin。然后，浏览器将调整图像大小，保持宽高比。

代码示例中的

max-width: 100%;确保图像永远不会显示为比其父容器更宽。

在您的代码示例中，无需进行设置：

大多数<img>都有所谓的内在维度（例如JPG，PNG，GIF）。在这种情况下，明确指出 width和height 都会使浏览器将这些内在维度用作给定图像的默认值。只要您恰好指定其中一个，另一个将设置为auto。

Answer 4

自动是高度 CSS属性的默认值。因此，您不需要在 img 元素选择器中定义该值，因为您没有使用不同的值覆盖它，您只是使用相同的默认值。

Answer 5

这取决于你想要/正在尝试做什么。

height:100%;

该元素将具有其父容器的100％高度。

height:auto;

元素将具有灵活的高度。高度将根据其中子元素的高度进行调整。