html設(shè)置圖片高度
Html中如果要設(shè)置圖片的高度,我們有兩種方法可以達(dá)到目的,下面由學(xué)習(xí)啦小編為大家整理了html設(shè)置圖片高度的方法,希望對大家有幫助!
html設(shè)置圖片高度
HTML中設(shè)置圖片的長度和寬度有兩種方法:HTML屬性直接設(shè)置、css樣式設(shè)置,現(xiàn)在一般設(shè)置樣式都是使用css來設(shè)置。
設(shè)置圖片高度方法一、HTML方法設(shè)置圖片寬度高度
1、可以直接使用HTML的元素的屬性來設(shè)置圖片的寬高,代碼如下:
<img src="test.jpg" height="200px">
2、同理也可以設(shè)置width屬性,不建議同時設(shè)置防止圖片變形。
設(shè)置圖片高度方法二、css方法設(shè)置圖片的寬度和高度
1、可使用css代碼設(shè)置圖片的寬高的代碼如下:
<img src="test.jpg" style="width:200px;height:200px;">
補充:使用百分比值設(shè)置高度和寬度
使用 width 屬性的最后一個技巧是使用百分比值來代替像素的絕對值。這將使瀏覽器按照與瀏覽器顯示窗口的一定比例來縮放圖像。因此,如果要創(chuàng)建一個寬度與顯示窗口寬度相同,高度為 30 個像素的彩色橫條,可以這樣實現(xiàn):
<img src="/i/ct_1px.gif" width="60%" height="30px" />
當(dāng)文檔窗口的大小改變時,這個圖像的大小也會隨之改變
提示:如果提供了一個百分比形式的 width 值而忽略了 height,那么不管是放大還是縮小,瀏覽器都將保持圖像的寬高比例。這意味著圖像的高度與寬度之比將不會發(fā)生變化,圖像也就不會發(fā)生扭曲。
請看下面的 HTML:
<img src="/i/ct_1px.gif" width="20%" />
也就是說,如果只設(shè)置圖像 ct_1px.gif 的 width 屬性的百分比值,會得到一個矩形圖像(這是因為原始的 ct_1px.gif 就是一個只有 1px 寬和高的矩形):
html設(shè)置圖片高度
上一篇:html設(shè)置瀏覽器大小