CSS max-height 屬性

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

CSS max-height 屬性語法

max-height: 高度值;

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

CSS max-height 屬性參數值表

寬度值	語法	說明
none	max-height:none;	預設值，不設定最大高度限制。
高度	max-height:數字+單位;	可接受的單位有 px, em, cm 等網頁標準單位。
%	max-height:數字%;	利用百分比設定網頁元素高度，需要有比較的參考。
inherit	max-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 屬性。

延伸閱讀