W3G

min-widthプロパティの値

min-widthプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>

"em", "px" などの単位識別子を伴う数値で指定（負の値は不正）

<パーセンテージ>

包含ブロックの横幅を基準とするパーセンテージ（%）による割合で指定（負の値は不正）

最小の横幅に対して、最大の横幅（これ以上は広げない設定）は、max-widthプロパティで設定します。min-widthプロパティと max-widthプロパティは同時に指定可能です。max-widthプロパティで指定した横幅の値よりも、min-widthプロパティで指定した横幅の値が大きい場合、min-widthプロパティの値は、max-widthプロパティと同じ値に割り当て直されます。

さらに、widthプロパティで指定した横幅の値が、max-widthプロパティで指定した値より大きい場合や min-widthプロパティで指定した値より小さい場合、これらの指定値は、widthプロパティの値として割り当て直されます。

min-widthプロパティの実装状況

IE

◯：IE7よりサポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

Internet Explorer 6は min-widthプロパティに対応していません。

サンプル

img.expand {
min-width : 200px ;
min-height : 150px ;
}

このサンプルでは、min-widthプロパティ, min-heightプロパティでもとの画像サイズが横"200px"、縦"150px"よりも小さい場合は最低でも横"200px"以上、縦"150px"以上のサイズに拡げる設定を行っています。拡大表示されても画像そのものの縦横比率は保たれますが、画像のもつ解像度は変わらないため拡大される分だけ荒く表示されます。