Min and max width and height

概要

要素のサイズに上限と下限を設けるプロパティです。レスポンシブデザインにおいて、要素が極端に小さくなったり大きくなったりすることを防ぎます。max-width: 100%は画像のレスポンシブ対応の定番パターンであり、min-heightはフッターを下に押し下げるレイアウトに使用されます。

対応ブラウザ

基本構文

img {
  max-width: 100%;
  height: auto;
}
.main {
  min-height: 100vh;
}

実務での使いどころ

• 画像のレスポンシブ制御

  max-width: 100%で画像がコンテナからはみ出さないようにし、min-heightでメインコンテンツの最小高さを保証します。

注意点

アクセシビリティ

• テキストを含む要素にmax-heightを設定する場合、フォントサイズの拡大時にテキストが切れないようoverflowの処理を確認してください。

参考リンク

• MDN Web Docs — Min and max width and height
• Can I use — Min and max width and height