img 属性(width height)和style(width height)区别

• 属性width height

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

  属性值：pixels(以像素为单位的高度或宽度值)
               percent(以包含元素的百分比计的高度或宽度值)

  使用技巧：

  • 隐藏特性：无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。

    使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。

    但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。

  • 是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能.

    不需要创建一个具有完整尺寸的图像，使用 height 和 width 属性把它扩展到更大的尺寸(在文档中放置一个彩色的横条)

  问题：但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置

• 区别

  css上设置的权限高于直接在img上面设置。

  固有尺寸：img图片的自身大小，如果html尺寸不设置，并且Css尺寸不设置，则展现资源图片的固有宽高。

  html尺寸：通过html设置height，width属性，且没有Css限制，则展现为html尺寸。

  Css尺寸：通过Css属性设置宽高，展现为Css属性设置的结果。