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è)置防止圖片變形。

　　設(shè)置圖片高度方法二、css方法設(shè)置圖片的寬度和高度

　　1、可使用css代碼設(shè)置圖片的寬高的代碼如下：

　　<img src="test.jpg" style="width:200px;height:200px;">

　　補(bǔ)充：使用百分比值設(shè)置高度和寬度

　　使用 width 屬性的最后一個(gè)技巧是使用百分比值來代替像素的絕對值。這將使瀏覽器按照與瀏覽器顯示窗口的一定比例來縮放圖像。因此，如果要?jiǎng)?chuàng)建一個(gè)寬度與顯示窗口寬度相同，高度為 30 個(gè)像素的彩色橫條，可以這樣實(shí)現(xiàn)：

　　<img src="/i/ct_1px.gif" width="60%" height="30px" />

　　當(dāng)文檔窗口的大小改變時(shí)，這個(gè)圖像的大小也會(huì)隨之改變

　　提示：如果提供了一個(gè)百分比形式的 width 值而忽略了 height，那么不管是放大還是縮小，瀏覽器都將保持圖像的寬高比例。這意味著圖像的高度與寬度之比將不會(huì)發(fā)生變化，圖像也就不會(huì)發(fā)生扭曲。

　　請看下面的 HTML：

　　<img src="/i/ct_1px.gif" width="20%" />

　　也就是說，如果只設(shè)置圖像 ct_1px.gif 的 width 屬性的百分比值，會(huì)得到一個(gè)矩形圖像(這是因?yàn)樵嫉?ct_1px.gif 就是一個(gè)只有 1px 寬和高的矩形)：