在制作网页时，CSS设置图片大小只需设置图片的宽度属性width和高度属性height即可，设置方法如下：
img { width:数值; height:数值;}
其中，宽度属性width和高度属性height的值既可以是绝对数值，如200px，也可以是相对数值，如50%，当width设置为50%时，图片的宽度将调整为父元素宽度的一半。
【示例1】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签中输入以下内容：
<img src="images/1.jpg">
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式：
img{ width:50%; /*相对宽度*/}
因为在制作网页时设置的是相对大小，这里是相对于body元素的宽度，因此图片的大小总是保持相对于body的50%，当改变浏览器大小时，图片的大小也相对变化，但总是保持在50%的水平。
这里需要指出的是，在此例中仅仅设置了图片的width属性，而没有设置height属性，但是图片的大小会等纵横比例缩放，如果只设定了height属性而没有设置width属性道理也是一样的。
【示例2】在设置图片大小时，当同时设定了width和height属性时，图片将不等比缩放。启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入如下结构：
<img src="images/2.jpg">在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
img{ width: 60%; /*相对宽度*/ height: 200px; /*绝对宽度*/}
其显示结果可以看到图片的高度固定为280px，当浏览器窗口变化时，高度并没有随着图片宽度的变化而变化，图片发生了不等比的缩放。
【拓展】在图片缩放中，等比例地修改图片的宽度值和高度值，可以保证图片不变形。其实在网页设计时还有一个参数max-width，通过设置它可以保证图片不变形。这个参数就是用来设置图片的最大值，如果图片的尺寸超过这个图片的最大值（max-width），那么就按设置的max-width值显示宽度，而图片的高度将做同比例变化。但是，如果图片的尺寸小于最大宽度值，那么图片是按原尺寸来显示，不做缩放。这个参数的用法如下：
img{ max-width:最大宽度值;
}
其中，max-width属性的值一般为数值类型，只要将其定义为一个固定的数值就可以控制图片的最大宽度。例如定义max-width:400px，那么就定义了图片的最大宽度为400px，就算超出这个宽度值，也只会显示400px大小；如果图片的宽度值小于这个值，则会按图片的原大小显示。
当前文章标题：在网页设计中定义图片大小
当前URL：http://www.lyjtt.cn/news/wzzz/3102.html
上一篇：设置图片样式
下一篇：定义图片的横纵向对齐
