在制作網(wǎng)頁(yè)時(shí)，CSS設(shè)置圖片大小只需設(shè)置圖片的寬度屬性width和高度屬性height即可，設(shè)置方法如下：
img { width:數(shù)值; height:數(shù)值;}
其中，寬度屬性width和高度屬性height的值既可以是絕對(duì)數(shù)值，如200px，也可以是相對(duì)數(shù)值，如50%，當(dāng)width設(shè)置為50%時(shí)，圖片的寬度將調(diào)整為父元素寬度的一半。
【示例1】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<body>標(biāo)簽中輸入以下內(nèi)容：
<img src="images/1.jpg">
在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式：
img{ width:50%; /*相對(duì)寬度*/}
因?yàn)樵?a href="http://www.gtalker.cn" target="_self" title="昆明網(wǎng)頁(yè)制作">制作網(wǎng)頁(yè)時(shí)設(shè)置的是相對(duì)大小，這里是相對(duì)于body元素的寬度，因此圖片的大小總是保持相對(duì)于body的50%，當(dāng)改變?yōu)g覽器大小時(shí)，圖片的大小也相對(duì)變化，但總是保持在50%的水平。
這里需要指出的是，在此例中僅僅設(shè)置了圖片的width屬性，而沒(méi)有設(shè)置height屬性，但是圖片的大小會(huì)等縱橫比例縮放，如果只設(shè)定了height屬性而沒(méi)有設(shè)置width屬性道理也是一樣的。
【示例2】在設(shè)置圖片大小時(shí)，當(dāng)同時(shí)設(shè)定了width和height屬性時(shí)，圖片將不等比縮放。啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<body>標(biāo)簽內(nèi)輸入如下結(jié)構(gòu)：
<img src="images/2.jpg">在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表。
img{ width: 60%; /*相對(duì)寬度*/ height: 200px; /*絕對(duì)寬度*/}
其顯示結(jié)果可以看到圖片的高度固定為280px，當(dāng)瀏覽器窗口變化時(shí)，高度并沒(méi)有隨著圖片寬度的變化而變化，圖片發(fā)生了不等比的縮放。
【拓展】在圖片縮放中，等比例地修改圖片的寬度值和高度值，可以保證圖片不變形。其實(shí)在網(wǎng)頁(yè)設(shè)計(jì)時(shí)還有一個(gè)參數(shù)max-width，通過(guò)設(shè)置它可以保證圖片不變形。這個(gè)參數(shù)就是用來(lái)設(shè)置圖片的最大值，如果圖片的尺寸超過(guò)這個(gè)圖片的最大值（max-width），那么就按設(shè)置的max-width值顯示寬度，而圖片的高度將做同比例變化。但是，如果圖片的尺寸小于最大寬度值，那么圖片是按原尺寸來(lái)顯示，不做縮放。這個(gè)參數(shù)的用法如下：
img{ max-width:最大寬度值;
}
其中，max-width屬性的值一般為數(shù)值類型，只要將其定義為一個(gè)固定的數(shù)值就可以控制圖片的最大寬度。例如定義max-width:400px，那么就定義了圖片的最大寬度為400px，就算超出這個(gè)寬度值，也只會(huì)顯示400px大小；如果圖片的寬度值小于這個(gè)值，則會(huì)按圖片的原大小顯示。
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中定義圖片大小
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/3102.html
上一篇：設(shè)置圖片樣式
下一篇：定義圖片的橫縱向?qū)R
