スポンサード リンク
max-widthプロパティ
HTML要素の横幅の最大値を指定できます(paddingを含まない横幅)使い方(書式)
セレクタ { max-width: 値; }
max-widthプロパティ
対応ブラウザ | |
適用できる要素 | ブロック要素とtd th input textarea select img |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
単位 | px、emなどの単位 |
% | パーセントで指定。親ブロック要素の割合を%で指定 |
none | 最大値の制限なし、初期値 |
実際の指定方法
.hogeimg { max-width: 100px; /* 横幅に100pxの最大値を設定 */ }
.hoge { max-width: 300px; } /* 300pxの横幅に指定 */
.hoge2 { max-width: 50%; } /* 親ブロック要素の50%の横幅 */
.hoge3 { max-width: none; } /* 表示できる幅まで広がります */.hoge { max-width: 100px; border: solid 1px; } .hoge2 { max-width: 50%; border: solid 1px; } .hoge3 { max-width: auto; border: solid 1px; }
html部分
<img class="hogeimg" src="a200.gif" alt=""> <div class="hoge">max-width: 300px;</div> <br> <div class="hoge2">max-width: 50%;</div> <br> <div class="hoge3">max-width: none;</div>
実際の表示
原寸大の画像ですwidthとの違い
widthプロパティは指定した幅で固定されるのに対して、max-widthは、最初は最大値で表示されますが、ブラウザの幅を小さくすると固定されずに縮小されます