标签的 height 和 width 属性设置图像的尺寸。
提示:为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。(下面的篇幅详细解释了这个观点)。
提示:请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。
改变图像大小 – 制作填充图像
height 和 width 属性有一种隐藏的特性,就是人们无需指定图像的实际大小,也就是说,这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像,使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图,以及放大很小的图像。但需要注意的是:浏览器还是必须要下载整个文件,不管它最终显示的尺寸到底是多大,而且,如果没有保持其原来的宽度和高度比例,图像会发生扭曲。
使用 height 和 width 属性的另外一种技巧,是可以非常容易地实现对页面区域的填充,同时还可以改善文档的性能。设想一下,如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像,相反,您只要创建一个宽度和高度都为 1 个像素的图像,并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。
<img src="/i/ct_1px.gif" width="200px" height="30px" />
这是上面这段 HTML 的效果,这个颜色彩条是用只有一个像素的图像制成的:

使用百分比值
使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此,如果要创建一个宽度与显示窗口宽度相同,高度为 30 个像素的彩色横条,可以这样实现:

当文档窗口的大小改变时,这个图像的大小也会随之改变:
提示:如果提供了一个百分比形式的 width 值而忽略了 height,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。
请看下面的 HTML:

也就是说,如果只设置图像 ct_1px.gif 的 width 属性的百分比值,会得到一个矩形图像(这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形)
1、统一大小?
我的网页上面有许多的图片,有的大,有的小,我想如果图片大的实现缩放,所有的都是一般大。来看看没有是什么效果。
大家看的出来,非常的难看的,于是我想让有没有一种方法是把那个大的变成小的呢?
<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /></li>
效果图如下:
但是如果图片太小了呢?就会被放大,好难看!!!有没有什么办法让大的变小,小的不被放大的方法呢?
效果如下: