5.1 图片缩放
网页上显示一张图片时，默认情况下都是以图片的原始大小显示。如果要对网页进行排版，通常情况下，还需要对图片进行大小的重新设定。如果对图片设置不恰当，会造成图片的变形和失真，所以一定要保持宽度和高度的比例适中。对于图片大小设定，可以采用三种方式完成。
5.1.1 案例1——通过描述标记width和height缩放图片
在HTML中，通过img的描述标记height和width可以设置图片大小。width和height分别表示图片的宽度和高度，二者的值可以是数值或百分比，单位可以是px。需要注意的是，高度属性height和宽度属性width设置要求相同。
【例5.1】（案例文件：ch05\5.1.html）
<!DOCTYPE html> <html> <head> <title>缩放图片</title> </head> <body> <img src="01.jpg" width=200 height=120> </body> </html>
在IE 11.0浏览器中浏览效果如图5-1所示，可以看到网页显示了一张图片，其宽度为200px，高度为120px。
图5-1 使用标记缩放图片
5.1.2 案例2——使用CSS3中的max-width和max-height缩放图片
max-width和max-height分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果图片默认尺寸超过了定义的大小时，那么就以max-width所定义的宽度值显示，而图片高度将同比例变化，如果定义的是max-height，以此类推。但是如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。max-width和max-height的值一般是数值类型。
其语法格式如下所示。
【例5.2】（案例文件：ch05\5.2.html）
<!DOCTYPE html>
<html>
<head>
<title>缩放图片</title>
<style>
img{
max-height:300px;
}
</style>
</head>
<body>
<img src="01.jpg">
</body>
</html>
在IE 11.0浏览器中浏览效果如图5-2所示，可以看到网页显示了一张图片，其显示高度是300px，宽度将做同比例缩放。
图5-2 同比例缩放图片
在本例中，也可以只设置max-width来定义图片最大宽度，而让高度自动缩放。
5.1.3 案例3——使用CSS3中的width和height缩放图片
在CSS3中，可以使用属性width和height来设置图片的宽度和高度，从而达到对图片的缩放效果。
【例5.3】（案例文件：ch05\5.3.html）
<!DOCTYPE html> <html> <head> <title>缩放图片</title> </head> <body> <img src="01.jpg"> <img src="01.jpg" style="width:150px;height:100px"> </body> </html>
在IE 11.0浏览器中浏览效果如图5-3所示，可以看到网页显示了两张图片，第一张图片以原大小显示，第二张图片以指定大小显示。
图5-3 CSS指定图片大小
提示
当仅仅设置了图片的width属性，而没有设置height属性时，图片本身会自动等比例缩放，如果只设定height属性也是一样的道理。只有当同时设定width和height属性时才会不等比例缩放。