HTML img height 圖片高度設計 - 網頁設計教學站

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

HTML img height 圖片高度設計範例

原始圖片 
<img src="upload/20150704185839.png"> 
將圖片的高度 height 縮小為 100px 
<img src="upload/20150704185839.png" style="height:100px;"> 
將圖片的高度 height 拉高為 300px 
<img src="upload/20150704185839.png" style="height:300px;"> 
將圖片的寬度 width 與高度 height 設為 300x100 
<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 圖片設計