網(wǎng)站建設要多少錢：CSS控制圖片的大小與HTML語言一樣
圖片縮放。CSS控制圖片的大小與HTML語言一樣，也是通過width和height兩個
屬性實現(xiàn)的。所不同的是，CSS可以使用更多的值，如前面提到的相對值和絕對值等。例
如，設置width的值為50%時，圖片的寬度將調(diào)整為父元素寬度的一半。
用“記事本”編寫如下代碼并保存為3_3 _11．htm文件。
通過瀏覽器查看，上面這段代碼在IE 9中的顯示結果CSS設置圖像大小的顯示效果
本例的顯示效果表明，因為設定的是相對大?。ㄟ@里即相對于body的寬度），因此當拖
動瀏覽器窗口改變其寬度時，圖像的大小也會相應地發(fā)生變化。
注意：當僅僅設置了圖像的width屬性，而沒有設置height屬性時，圖像本身會自動等縱
橫比縮放，如果只設定height屬性也是一樣的。只有當同時設定了width和height屬性時，
圖像才會不等比縮放。
2．圖像對齊
當圖像與文字同時出現(xiàn)在頁面上的時候，圖像的對齊方式就顯得尤為重要了。如何能
夠合理地將圖像對齊到理想的位置，成為頁面是否整體協(xié)調(diào)、統(tǒng)一的重要因素。
(1)橫向對齊方式。圖像水平對齊的方式與文字水平對齊的方式基本相同，分為左、中、
右3種。不同的是，圖像的水平對齊通常不能直接通過設置圖像的text - align屬性實現(xiàn)，而
是通過設置其父元素的該屬性來實現(xiàn)的。
用“記事本”編寫如下代碼并保存為3_3_12. htm文件。
通過瀏覽器查看，上面這段代碼在IE 9中的顯示結果如圖3-28所示。
圖3 -28 CSS設置圖像水平對齊的顯示效果
(2)縱向對齊方式。圖像垂直方向上的對齊方式主要體現(xiàn)在與文字搭配的情況下，尤其
是當圖像的高度與文字本身不一致時。CSS同樣是通過vertical - align屬性實現(xiàn)各種效果
的。屬性vertical - align的值很多，包括baseline、bottom、middle、sub、super、text - bottom、
text - top和top。
用“記事本”編寫如下代碼并保存為3_3 _13．htm文件：
(2)縱向對齊方式。圖像垂直方向上的對齊方式主要體現(xiàn)在與文字搭配的情況下，尤其
是當圖像的高度與文字本身不一致時。CSS同樣是通過vertical - align屬性實現(xiàn)各種效果
的。屬性vertical - align的值很多，包括baseline、bottom、middle、sub、super、text - bottom、
text - top和top。
用“記事本”編寫如下代碼并保存為3-3 _13．htm文件：
