HTML img height 圖片高度設計

如果你想自定網頁圖片的高度,可以透過 CSS style 來宣告一個 height 屬性,這是設計圖片高度的標準寫法,你可以強制將一張圖片放大顯示或縮小顯示,在網頁設計中是非常常用的技巧,不過有一個 height 屬性更常使用的是 width 屬性,width 是用來設計圖片寬度的屬性,有的時候我們也會把 height 與 width 搭配在一起使用,待會兒在範例中呈現給讀者朋友們看看它們的實際效果。

HTML img height 圖片高度設計範例
原始圖片<br>
<img src="upload/20150704185839.png"><br><br>
將圖片的高度 height 縮小為 100px <br>
<img src="upload/20150704185839.png" style="height:100px;"><br><br>
將圖片的高度 height 拉高為 300px <br>
<img src="upload/20150704185839.png" style="height:300px;"><br><br>
將圖片的寬度 width 與高度 height 設為 300x100 <br>
<img src="upload/20150704185839.png" style="width:300px;height:100px;">
範例的實際高度呈現效果

原始圖片


圖片的高度 height 縮小為 100px


圖片的高度 height 拉高為 300px


圖片的寬度 width 與高度 height 設為 300x100


為了呈現不同圖片高度 height 屬性的呈現效果,我們在範例中準備了四張不同大小的圖片,其實原本都是同樣的原圖,只不過透過 CSS 的 height 屬性調整了高度,我們從最上面開始看,第一張圖是原圖,沒什麼好解釋的,第二張圖將高度 height 調整為 100px,所以整張圖片等比例縮小了(寬度也等比例縮小),第三張圖是強制將高度 height 由原本的 200px 拉高至 300px,所以整張圖片等比例放大了,有趣的是第四張圖,我們把寬度強制維持在 300px,接著再強制把高度縮小為 100px,很明顯的圖片出現壓縮變形。

關於圖片寬度的設定,可以參閱《HTML img width 圖片寬度設計》的詳細介紹。

更多 HTML img 圖片設計
© Copyright webtech.tw Since 2010