CSS max-width 屬性

CSS max-width 屬性的功能是用來限制網頁元素最大寬度不可以超過指定的限度，為什麼會有這個功能呢？因為現在網頁上有許多的元件或元素會隨著螢幕大小的改變或是父層元素的條件改變，變更自己本身的元素寬度，如果你有一張圖片或是一個影片，會隨著父層或螢幕的大小而自動縮放，可是總不能無止盡的放大，如果超出適宜瀏覽的大小，畫面就會很難看，這時候我們就可以透 CSS max-width 屬性的功能，來限制這張圖片或影片最大的寬度必須保持在一個適合閱讀的大小，所有主流的瀏覽器都支援 CSS max-width 屬性的功能。

CSS max-width 屬性語法

max-width: 最大寬度值;

CSS max-width 屬性僅有一個可以設定的參數，即為最大寬度值，可以接受長用的長度單位如 em, cm, px ... 等，也可以接受百分比（%）的設定方式，下表為 CSS max-width 屬性的可用設定參數值，請自行參閱。

CSS max-width 屬性可用設定參數值

寬度值	語法	說明
none	max-width:none;	預設值，不設定最大寬度限制。
寬度	max-width:數字+單位;	可接受的單位有 px, em, cm 等網頁標準單位。
%	max-width:數字%;	利用百分比設定網頁元素最大寬度。
inherit	max-width:inherit;	繼承自父層的最大寬度屬性值。

備註：大部分的 IE 瀏覽器並不支援 inherit 的效果，不建議使用。

CSS max-width 屬性範例

這是一段測試文字，並未設定段落最大寬度，所以文字都會向右邊一直延伸，除非碰到範例邊框才會換行。


這是一段測試文字，我們將段落文字所能呈現的最大寬度設為 200px，所以全部的文字都會擠在一個寬度 200px 的範圍內。

範例的輸出結果

這是一段測試文字，並未設定段落最大寬度，所以文字都會向右邊一直延伸，除非碰到範例邊框才會換行。

這是一段測試文字，我們將段落文字所能呈現的最大寬度設為 200px，所以全部的文字都會擠在一個寬度 200px 的範圍內。

我們在範例中準備了兩個段落 的文字，第一個段落並未使用 CSS 的 max-width 屬性，所以 標籤範圍內的文字並不受到最大寬度限制，只要沒有碰到範例輸出的那個虛線框框，就會一直向右延伸，而第二個段落使用了 max-width 屬性，並將最大寬度限制在 200px 的範圍內，所以文字就自動換行，以免超出最大寬度 200px 的限制。

與 CSS max-width 屬性相對應的是：CSS min-width 屬性。

延伸閱讀