位置:首頁 > 軟件操作教程 > UI設(shè)計軟件 > Adobe Dreamweaver > 問題詳情

在Dreamweaver中如何定義圖像自適應(yīng)大小

提問人:劉旭39發(fā)布時間:2020-11-10

定義圖像自適應(yīng)大小

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

【操作步驟】

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

第2步,在頁面中選中段落文本中的插圖,然后在“屬性”面板中設(shè)置圖像的大小,如圖所示。image.png

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

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

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

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

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

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(0)
返回頂部