HTML <img> width 属性详解

HTML基础 2022-06-02 12:02:13小码哥的IT人生shichen

HTML <img> width 属性

高度为 400 像素，宽度为 600 像素的图像：

<img src="tulip-yellow.jpg" alt="郁金香" width="600" height="400">

<!DOCTYPE html>
<html>
<body>
<h1>img width 属性</h1>
<img src="/i/photo/tulip-yellow.jpg" alt="郁金香" width="600" height="400">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

width 属性规定图像的宽度，以像素为单位。

提示：始终规定图像的 height 和 width 属性。如果设置了高度和宽度，则在加载页面时保留图像所需的空间。但是，如果没有这些属性，浏览器将不知道图像的大小，也无法为其预留适当的空间。效果将是页面布局将在加载期间更改（同时加载图像）。

提示：缩小具有高度和宽度属性的大图像会迫使用户下载大图像（即使它在页面上看起来很小）。为避免这种情况，请在将图像用于页面之前使用程序重新缩放图像。

属性	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
width	Yes	Yes	Yes	Yes	Yes

<img width="pixels">

值	描述
pixels	以像素计的宽度（例如 width="100"）。