max-height

max-heightは、高さの最大値を指定するスタイルです。

解説

要素の高さの最大値を指定します。
ある一定の高さサイズ以上にはしたくない場合に使用します。

例えば、画像を表示させる時に高さを100px以下に揃えたい場合などに使用します。

heightと併用する場合は、heightの値は割合指定（可変サイズ）としてください。

構文は以下になります。

max-height: 値;

max-heightには以下の値が指定できます。

値	説明
auto	要素の内容により自動で指定される（例）max-height:auto;
数値	px単位などで指定する（例）max-height:300px;
割合	割合で指定する（例）max-height:70%;

太字の値は初期値です。


.sample01 {
  max-height:50px;
}


<img src="image/neko.png" class="sample01">

画像のheightサイズは100pxですが、50pxサイズで表示されています。

heightとmax-heightのサイズが競合する場合は、max-heightのサイズが優先されます。
（heightサイズよりも max-heightサイズの方が小さい場合など）