CSS min-width 屬性

CSS min-width 屬性的功能是用來控制網頁元素的最小寬度，例如圖片、影片、DIV 區塊、textarea 文字輸入欄位 ... 等，舉例來說，在一個網頁中的一張圖片，寬度也許是利用百分比來設置，有可能隨著父層元素或整個網頁的大小而改變圖片的大小，但總不能無止境的縮小，所以網頁設計師可以利用 CSS min-width 屬性的功能來限制圖片最小不能低於多少寬度，保有圖片瀏覽的實用性，所有主流的瀏覽器都支援 CSS min-width 屬性的效果，IE6 以及更舊的版本不支援 CSS min-width 屬性。

CSS min-width 屬性語法

min-width: 寬度設定値;

CSS min-width 可以自己設定寬度設定値，可接受數字加上寬度單位（如 px, em, cm ... 等），也接受百分比（%）的設定方式，另外，繼承自父層的 inherit 並非所有瀏覽器支援，不建議使用，三種 min-width 屬性設定方式整裡如下。

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

CSS min-width 屬性範例

範例的輸出結果

為了可以清楚的看到 CSS min-width 屬性的效果，我們在範例中準備了兩張圖片，第一張圖片的寬度設為 100%，隨著父層 DIV 區塊的大小而改變圖片本身的大小，第二張圖片則使用了今天的主題「min-width」屬性，並將最小寬度設為 300px，如此一來，圖片就不會隨著 DIV 的大小而改變，儘管 DIV 區塊的尺寸限制為 200px，圖片還是一樣有 300px 的大小，這就是 min-width 屬性的最基本功用。

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

延伸閱讀