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