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