Go to information

max-height

max-heightプロパティは要素の生成するボックスの最大の高さ(これ以上は高くしない設定)を設定します。

初期値
none
適用対象
すべての要素非置換インライン要素表関連要素を除く)
継承
しない
メディア
visual

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

none
高さに対して制限をしないように設定します
<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
<パーセンテージ>
包含ブロックの高さを基準とするパーセンテージ(%)による割合で指定(負の値は不正)

最大の高さに対して、最小の高さ(これ以上は低くしない設定)は、min-heightプロパティで設定します。max-heightプロパティと min-heightプロパティは同時に指定可能です。max-heightプロパティで設定した高さの値よりも、min-heightプロパティで設定した高さの値が大きい場合、min-heightプロパティの値は、max-heightプロパティと同じ値に割り当て直されます。また、heightプロパティで指定した高さの値が、max-heightプロパティで指定した値より大きい場合や min-heightプロパティで指定した値より小さい場合、これらの指定値は、heightプロパティの値として割り当て直されます。

max-heightプロパティの実装状況

Windows版Internet Explorer
Windows版Internet Explorer 6 は max-heightプロパティに対応していません。
Windows版Internet Explorer 7 より max-heightプロパティに対応しています。
Firefox
Opera
Safari
○(画像を表示する要素に指定し、実際の画像サイズよりも拡大した場合に縦横の比率を変えてしまう)
Macintosh版Internet Explorer 5
×

Windows版Internet Explorer 6、及び Macintosh版Internet Explorer 5 は max-heightプロパティに対応していません。Windows版については、Internet Explorer 7 より対応しています。

サンプル

記述例
.contract { max-height : 345px ; }
.expand   { min-height : 350px ; }
表示例

サンプルのように、高さが "350px"よりも大きい画像は "350px" に縮小、"345px" よりも小さい画像は "345px" に拡大するように、画像の拡大・縮小に特に有用です。ただし、Windows版Internet Explorer 7, Netscape, Firefox, Opera では縦横はそのままの比率で拡大・縮小を行いますが、Safari だけは拡大・縮小に応じて縦横の比率を変えてしまいます。

現在位置
  1. W3G
  2. CSS
  3. ボックス
  4. max-height
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:37:52+09:00
更新
2008-12-29T04:30:38+09:00
URI
http://w3g.jp/css/box/max-height
検索