max-heightプロパティ

TOPページに戻る > CSS

スポンサード リンク

max-heightプロパティ

HTML要素の高さの最大値を指定できます(paddingを含まない高さ)
指定した値より高くなりません
値はpx、emなどの単位、親ブロック要素の割合を%で指定、none(最大値の設定なし)
paddingの幅はmax-heightの幅には含まれません。paddingを指定している場合、max-heightの幅+paddingが要素の横幅になります
min-heightといっしょにmax-heightを使うことができます。その場合、mix-heightが100px、max-heightが200pxに指定すると100px〜200pxの範囲に高さを限定できます
※IE6が対応していません IE7から対応しています

使い方(書式)

セレクタ { max-height: 値; }

max-heightプロパティ

対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素とtd th input textarea select img
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセントで指定。親ブロック要素の割合を%で指定
none 最大値の制限なし、初期値

実際の指定方法

.hogeimg {
 max-height: 100px; /* 高さを100pxの最大値を設定 */
 }
.hoge {
 max-height: 50px; /* 50pxの高さに最大値を設定 */
 height:500px;     /* 500pxの高さに指定してみる */
 }
.hogebox { 
 height: 80px; /* 親ブロック要素 */
 border: solid 1px blue;} /* 青い枠線を付ける */
.hoge2 {
 max-height: 50%;   /* 親ブロック要素の50%の高さを最大値に設定 */
 border: solid 1px; /* 枠線を付ける */
 }
.hoge3 { 
 max-height: none;  /* 最大値を設定しない。初期値 */
 border: solid 1px; /* 枠線を付ける */
  }

html部分

<img class="hogeimg" src="a200.gif" alt="">
<br>
<div class="hoge">max-height: 50px;</div>
<br>
<div class="hogebox">
<div class="hoge2">max-height: 50%;
<br>50%より高くならないテスト
<br>3行目は50%を超えたので最大値に収まりませんでした
</div>
</div>

<br>
<div class="hoge3">max-height: none;</div>

実際の表示

原寸大の画像です

下がmax-height: 100px;を指定した画像。ほとんどのブラウザは縦横比維持で縮小されます


max-height: 50px;

max-height: 50%;
50%より高くならないテスト
3行目は50%を超えたので最大値に収まりませんでした

max-height: none;




(C)2012 ホームページ作成無料