Question

使用<img>或width在max-width上设置宽度时，我看到很多开发人员和一些框架（如bootstrap）也设置了height: auto。

在这种情况下是否需要height: auto，如果是这样，为什么？（假设您希望在调整大小时保持图像成比例，并且先前未在CSS中设置height。）

有人提到Windows Phone 8上的IE10需要它。（这对我来说似乎很奇怪。）可能有些浏览器需要这个设置吗？

示例（fiddle）：

div{
    border: 2px solid red;
    width: 300px;
}
.maxwidth{
    max-width: 100%;
}
.width{
    width: 100%;
}

<p><code>max-width: 100%</code>:</p>
<div><img class="maxwidth" src="https://placeimg.com/640/480/animals"></div>

<p><code>width: 100%</code>:</p>
<div><img class="width" src="https://placeimg.com/640/480/animals"></div>

<p>No <code>height: auto</code> is used, but images still stay proportional.</p>

Answer 1

对于初学者来说，initial value for height is auto，除非在其他地方被覆盖，否则您不应该指定height: auto。

此外，我不知道这与img元素本身在CSS图像（背景等）上的紧密程度有关，但我相信浏览器无论如何都应该自动处理。如果此文档也适用于img元素，我相信CSS Image Values and Replaced Content Module Level 3的默认大小调整算法部分解释了浏览器应如何处理此问题：

默认大小调整算法定义如下：



如果指定的尺寸是明确的宽度和高度，则给出具体的物体尺寸宽度和高度。



如果指定的大小只是宽度或高度（但不是两者），则给定具体对象大小指定的宽度或高度。 另一个维度的计算方法如下：



如果对象具有固有纵横比，则使用固有纵横比和当前尺寸计算具体对象尺寸的缺失尺寸。



否则，如果对象的内在维度中存在缺失的维度，则缺少的维度取自对象的内在维度。



否则，具体对象大小的缺失维度取自默认对象大小。

更新

似乎Bootstrap使用它来覆盖height元素上的任何自定义img属性，以确保始终从height计算width。

Answer 2

height: auto仅通过.img-responsive class定义。定义它以便覆盖图像高度属性（如果已设置）。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<h2>Without auto height</h2>
  <img src="http://www.placehold.it/200" class="" width="200" height="100">

<h2>With auto height</h2>
  <img src="http://www.placehold.it/200" class="img-responsive" width="200" height="100">

＆＃13;

在图像上设置宽度时需要`height：auto;`吗？

2 个答案:

更新