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