max-heightプロパティは要素の生成するボックスの最大の高さ(これ以上は高くしない設定)を設定します。
max-heightプロパティに指定できる値は、それぞれ以下の意味を示します。
noneem", "px" などの単位識別子を伴う数値で指定(負の値は不正)%)による割合で指定(負の値は不正)最大の高さに対して、最小の高さ(これ以上は低くしない設定)は、min-heightプロパティで設定します。max-heightプロパティと min-heightプロパティは同時に指定可能です。max-heightプロパティで設定した高さの値よりも、min-heightプロパティで設定した高さの値が大きい場合、min-heightプロパティの値は、max-heightプロパティと同じ値に割り当て直されます。また、heightプロパティで指定した高さの値が、max-heightプロパティで指定した値より大きい場合や min-heightプロパティで指定した値より小さい場合、これらの指定値は、heightプロパティの値として割り当て直されます。
max-heightプロパティに対応していません。max-heightプロパティに対応しています。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 だけは拡大・縮小に応じて縦横の比率を変えてしまいます。