在Dreamweaver中如何定義圖像自適應大小

定義圖像自適應大小

<img>#簽包含width和height屬性，可以控制圖像的大小，在標準網頁設計中這兩個屬性依然 有效。也可以在CSS中可以使用width和height屬性定義圖像的寬度和高度。下面演示如何快速設計 文檔中新聞圖像的大小。

【操作步驟】

第1步，啟動Dreamweaver CC，打開模板頁面temp.html，另存為index.html。

第2步，在頁面中選中段落文本中的插圖，然后在“屬性”面板中設置圖像的大小，如圖所示。

第3步，選擇“窗口”|“CSS設計器“命令，打開”CSS設計器“面板，依次執(zhí)行下面操作，如圖所示。

(1)在“源”標題右側單擊*按鈕，在彈出的下拉菜單中選擇“在頁面中定義”命令，設計網 頁內部樣式表。

(2)在“選擇器”標題右側單擊按鈕，新增一個選擇器，命名為img。

(3)在“屬性”列表框中找到width屬性，單擊右側屬性值列，輸入值為100%,即設置圖像寬 度為100%。當圖像大小取值為百分比時，瀏覽器將根據圖像包含框的寬和高計算圖像。

第4步，按Ctrl+S快捷鍵，保存網頁，再按FI2鍵在瀏覽器中預覽， 則可以看到CSS的width屬性會優(yōu)先于HTML的width屬性，圖像先按100%顯示，而不是600px。