网站建设要多少钱：CSS控制图片的大小与HTML语言一样
图片缩放。CSS控制图片的大小与HTML语言一样，也是通过width和height两个
属性实现的。所不同的是，CSS可以使用更多的值，如前面提到的相对值和绝对值等。例
如，设置width的值为50%时，图片的宽度将调整为父元素宽度的一半。
用“记事本”编写如下代码并保存为3_3 _11．htm文件。
通过浏览器查看，上面这段代码在IE 9中的显示结果CSS设置图像大小的显示效果
本例的显示效果表明，因为设定的是相对大小（这里即相对于body的宽度），因此当拖
动浏览器窗口改变其宽度时，图像的大小也会相应地发生变化。
注意：当仅仅设置了图像的width属性，而没有设置height属性时，图像本身会自动等纵
横比缩放，如果只设定height属性也是一样的。只有当同时设定了width和height属性时，
图像才会不等比缩放。
2．图像对齐
当图像与文字同时出现在页面上的时候，图像的对齐方式就显得尤为重要了。如何能
够合理地将图像对齐到理想的位置，成为页面是否整体协调、统一的重要因素。
(1)横向对齐方式。图像水平对齐的方式与文字水平对齐的方式基本相同，分为左、中、
右3种。不同的是，图像的水平对齐通常不能直接通过设置图像的text - align属性实现，而
是通过设置其父元素的该属性来实现的。
用“记事本”编写如下代码并保存为3_3_12. htm文件。
通过浏览器查看，上面这段代码在IE 9中的显示结果如图3-28所示。
图3 -28 CSS设置图像水平对齐的显示效果
(2)纵向对齐方式。图像垂直方向上的对齐方式主要体现在与文字搭配的情况下，尤其
是当图像的高度与文字本身不一致时。CSS同样是通过vertical - align属性实现各种效果
的。属性vertical - align的值很多，包括baseline、bottom、middle、sub、super、text - bottom、
text - top和top。
用“记事本”编写如下代码并保存为3_3 _13．htm文件：
(2)纵向对齐方式。图像垂直方向上的对齐方式主要体现在与文字搭配的情况下，尤其
是当图像的高度与文字本身不一致时。CSS同样是通过vertical - align属性实现各种效果
的。属性vertical - align的值很多，包括baseline、bottom、middle、sub、super、text - bottom、
text - top和top。
用“记事本”编写如下代码并保存为3-3 _13．htm文件：
