CSS max-height 屬性

CSS max-height 屬性的功能是用來設計網頁元素的最大高度,例如一個段落的 max-height 或是一張圖片的最大高度限制,max-height 屬性是 height 屬性的進階用法,所有主流的瀏覽器都支援 max-height 屬性的功能,可以使用長度單位或是百分比來表示最大的元素高度。

CSS max-height 屬性語法
max-height: 高度值;
CSS max-height 屬性只可以設定一個高度參數值,常用的如自定高度、百分比,整理如下表:

CSS max-height 屬性參數值表
寬度值語法說明
nonemax-height:none;
預設值,不設定最大高度限制。
高度max-height:數字+單位;
可接受的單位有 px, em, cm 等網頁標準單位。
%max-height:數字%;
利用百分比設定網頁元素高度,需要有比較的參考。
inheritmax-height:inherit;
繼承自父層的高度屬性值。
最後一個 inherit 屬性值在 IE 瀏覽器並不支援,不建議使用。

CSS max-height 屬性範例、調整圖片的最大高度
原始圖片:<img src="upload/20141007145509.png" style="height:auto;"><br><br>
修改圖片:<img src="upload/20141007145509.png" style="max-height:50px;">
範例的輸出結果
原始圖片:

修改圖片:
範例的原始圖片高度是 80px,我們藉由高度調整屬性 height 的 auto 將原圖呈現出來,修改圖片的部份則使用「max-height:50px;」將圖片的最大高度限至在 50px,所以整張圖片似乎等比例縮小了。

也許有人會覺得這樣的效果跟直接用 height 設為 50px 沒什麼兩樣,的確,單就範例的呈現效果是這樣沒錯,不過別忘了,max-height 屬性並不單純只是用來設定固定高度,而是用來設定"最大高度",換言之,範例的這種寫法,圖片是可以縮到比 50px 還小的,只要搭配其它條件,例如圖片父層的大小被壓縮,圖片就有可能再度縮小,這點與 height 就很不一樣。

通常要設定隨著螢幕大小改變的最大高度,會使用百分比來表示。

與 max-height 相對應的是:CSS min-height 屬性

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C