Question

这是W3School的一个例子。

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

我试图将宽度从100px修改为300px。然后我发现图像不仅变得更宽，而且更高。

这是W3School的定义：

width属性设置或返回元素的宽度。

我有点混淆width属性究竟是什么。

Answer 1

width属性正如它所说的那样;表示元素的宽度。但考虑到图片没有明确设置 height ，height会根据宽度自动调整，以保持相同的宽高比。

这是因为 CSS box model ：

如果未明确设置，则 box-sizing 属性的默认值为border-box。这使得height属性基于边界区域：

但是，如果将box-sizing设置为border-box，则会改为确定边框区域的高度。

边框区域是width和height：

的组合

边界区域以边框边界为边界，扩展填充区域以包含元素的边框。它的尺寸是边框宽度和边框高度。

因此，设置height会使图像偏斜并尊重您设置的高度，但省略它会自动保持纵横比。

Answer 2

width属性指定元素的宽度。在<img>中，由于您未设置任何height，因此默认情况下其高度设置为height: auto;，这意味着它将自动获取所需的高度以保持宽高比。

希望你理解。

Answer 3

width Property只会增加宽度。在您的示例中，由于img标记仅包含width属性，因此当您增加宽度时图像的高度也会增加。

例如，当您将height属性分配到img标记时，您的混淆可以被清除。