# `<img>`元素的width属性和CSS设置width的区别

<img>元素设置内链的width attr和使用css设置width属性具体有什么区别。

# 1、为什么要给img元素设置宽高属性

如果不用展示图片的原始尺寸，可以在页面加载时为图片预留部分的空间，避免图片加载之后，页面布局又发生变化，从而导致回流。设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。

<img src="./1.png" alt="" width="200" />

width属性表示图像的宽度，以像素为单位。必须是没有单位的整数。如果没有设置height属性，图像会保持原始宽高比例，高度会根据宽度计算。如果设置了高度，那么图像的原始比例可能会被破坏。

使用案例

无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，或是放大很小的图像。但需要注意的是，浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。
可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。不需要创建一个具有完整尺寸的图像，使用 height 和 width 属性把它扩展到更大的尺寸（比如在文档中放置一个彩色的横条）。

设置了宽高的负面效果

在用户已经关掉了自动下载图像功能的情况下，浏览器还是会把为图像预留的空间以指定的尺寸显示出来，而这样留给用户的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。

两者之间对于图像的显示没有任何的区别。但是CSS中设置width与height的权限高于直接在img元素中对属性width与height的设置。

使用 srcset 和 sizes 属性，配合<picture>元素，来实现根据不同的宽度，分辨率，加载不同尺寸大小和内容的图片。