HTML学习笔记——img属性width/height和style中width/height的区别

参考：https://blog.csdn.net/weixin_34354173/article/details/91382744

<img>属性width与height

作用：在页面加载时为图像预留空间，以免图片加载时，页面布局会发生变化。

属性值：pixels——以像素为单位，如 height=“100”。

使用技巧：

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

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

区别

CSS中设置width与height的权限高于直接在img元素中对属性width与height的设置

固有尺寸：原资源图片的自身大小，如果不设置HTML尺寸和CSS尺寸，则展现资源图片的固有宽高。

HTML尺寸：通过HTML的img元素对属性height与width进行设置，如果没有设置CSS尺寸，则展现为HTML尺寸。

CSS尺寸：在CSS中设置height与width，则展现为CSS属性设置的结果。