博客

属性

width


height


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

属性值：

pixels

(以像素为单位的高度或宽度值)


percent

(以包含元素的百分比计的高度或宽度值)

使用技巧：

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

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

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

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

  不需要创建一个具有完整尺寸的图像，使用
  
height

  和
  
width

  属性把它扩展到更大的尺寸(在文档中放置一个彩色的横条)

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

区别


css

上设置的权限高于直接在

img

上面设置。

固有尺寸：

img

图片的自身大小，如果html尺寸不设置，并且

Css

尺寸不设置，则展现资源图片的固有宽高。

html尺寸：通过html设置

height，width

属性，且没有Css限制，则展现为

html

尺寸。

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