Min and max width and height
max-height は CSS のプロパティで、要素の最大高を設定します。これは height プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1.3 | 18 | 1 | |
none | 18 | 12 | 1 | 1.3 | 18 | 1 |
| その他 | ||||||
| max-width は CSS のプロパティで、要素の最大幅を設定します。これは width プロパティの使用値が、 max-width で指定した値を上回ることを防ぎます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
none | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| min-height は CSS のプロパティで、要素の最小高を設定します。これは height プロパティの使用値が、min-height で指定した値を下回ることを防ぎます。 | 1 | 12 | 3 | 1.3 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 21 | 12 | 34 | 7 | 25 | 7 |
| その他 | ||||||
| min-width は CSS のプロパティで、要素の最小幅を設定します。これは width プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 21 | 12 | 34 | 7 | 25 | 7 |
注釈 1件
実装メモ
- CSS 2.1 では、`table` での `max-height` の動作は未定義のままです。 Firefox は `max-height` を `table` 要素に適用することをサポートしています。
注釈 1件
実装メモ
- CSS 2.1 では、`table` での `max-width` の動作は未定義のままです。 Firefox は、「table」要素への「max-width」の適用をサポートしています。
注釈 1件
実装メモ
- CSS 2.1 では、`table` での `min-height` の動作は未定義のままです。 Firefox は、「min-height」を「table」要素に適用することをサポートしています。
注釈 2件
削除済み
- このバージョンで機能が削除されました (22)
実装メモ
- Firefox 18 以降では、「min-height」の初期値として「auto」が使用されました。
注釈 1件
実装メモ
- CSS 2.1 では、`table` での `min-width` の動作は未定義のままです。 Firefox は、「min-width」を「table」要素に適用することをサポートしています。
注釈 1件
実装メモ
- Chrome は `min-width` の初期値として `auto` を使用します。
注釈 1件
実装メモ
- Edge は `min-width` の初期値として `auto` を使用します。
注釈 2件
削除済み
- このバージョンで機能が削除されました (22)
- Firefox 18 以降 (値が削除されるまで) は、「min-width」の初期値として「auto」を使用していました。
注釈 1件
実装メモ
- Chrome Android は、「min-width」の初期値として「auto」を使用します。
基本構文
CSS
img {
max-width: 100%;
height: auto;
}
.main {
min-height: 100vh;
}ライブデモ
実務での使いどころ
-
画像のレスポンシブ制御
max-width: 100%で画像がコンテナからはみ出さないようにし、min-heightでメインコンテンツの最小高さを保証します。
注意点
- min-widthはmax-widthより優先されるため、両方を設定する場合はmin-width ≤ max-widthとなるよう注意してください。
アクセシビリティ
- テキストを含む要素にmax-heightを設定する場合、フォントサイズの拡大時にテキストが切れないようoverflowの処理を確認してください。