html設置圖片高度

　　Html中如果要設置圖片的高度，我們有兩種方法可以達到目的，下面由學習啦小編為大家整理了html設置圖片高度的方法，希望對大家有幫助!

　　html設置圖片高度

　　HTML中設置圖片的長度和寬度有兩種方法：HTML屬性直接設置、css樣式設置，現在一般設置樣式都是使用css來設置。

　　設置圖片高度方法一、HTML方法設置圖片寬度高度

　　1、可以直接使用HTML的元素的屬性來設置圖片的寬高，代碼如下：

　　<img src="test.jpg" height="200px">

　　2、同理也可以設置width屬性，不建議同時設置防止圖片變形。

　　設置圖片高度方法二、css方法設置圖片的寬度和高度

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

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

　　補充：使用百分比值設置高度和寬度

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

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

　　當文檔窗口的大小改變時，這個圖像的大小也會隨之改變

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

　　請看下面的 HTML：

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

　　也就是說，如果只設置圖像 ct_1px.gif 的 width 屬性的百分比值，會得到一個矩形圖像(這是因為原始的 ct_1px.gif 就是一個只有 1px 寬和高的矩形)：