【徹底解説】CSSで画像の縦横比を維持しながら100%フィットさせるテクニック

2024-06-30

CSSで画像の縦横比を維持しながら100%の幅または高さを設定する方法

object-fitプロパティを使用する

CSS3で導入されたobject-fitプロパティは、画像の表示方法を制御する最も簡単な方法の一つです。このプロパティには、以下の値を指定できます。

contain: 画像を常に表示領域内に収まるようにリサイズしますが、縦横比は維持されます。画像が完全に表示されない場合があります。
none: 画像を元のサイズで表示します。
scale-down: 画像を元のサイズより小さくリサイズしますが、縦横比は維持されます。

画像の縦横比を維持しながら100%の幅または高さに設定するには、以下のいずれかの方法を使用できます。

width: 100%; height: auto; object-fit: contain;

この例では、画像の幅が親要素の幅に100%フィットし、高さが自動的に調整されます。object-fit: containにより、画像の縦横比が維持されます。

max-widthとmax-heightプロパティを使用すると、画像の最大幅と高さを制限することができます。画像が親要素の幅または高さを超えないようにしながら、縦横比を維持することができます。

img {
  max-width: 100%;
  max-height: 100%;
}

background-sizeプロパティを使用する

画像を背景画像として使用する場合は、background-sizeプロパティを使用して、画像のサイズと表示方法を制御することができます。このプロパティには、contain、cover、fillなどの値を指定できます。

.container {
  background-image: url('image.jpg');
  background-size: contain;
}

padding-topトリックを使用する

この方法は、擬似要素を使用して、画像の縦横比を維持しながら、親要素の幅に100%フィットさせるというものです。

.container {
  position: relative;
  padding-top: 56.25%; /* 画像のアスペクト比（高さ/幅）をパーセンテージで指定 */
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

注意点

上記の方法は、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、意図したとおりに動作しない場合があります。
画像のサイズが大きい場合、パフォーマンスが低下する可能性があります。
複雑なレイアウトを作成する場合は、object-fitプロパティよりも、max-widthとmax-heightプロパティを使用する方が柔軟性があります。

これらの方法を理解することで、様々な状況に合わせて、画像の縦横比を維持しながら、親要素の幅または高さに100%フィットさせることができるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS: 画像の縦横比を維持しながら100%の幅または高さに設定する</title>
  <style>
    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="画像の説明">
  </div>
</body>
</html>

このコードでは、object-fit: contain;プロパティを使用して、画像を常に表示領域内に収まるようにリサイズしています。画像が完全に表示されない場合があります。

max-widthとmax-heightプロパティを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS: 画像の縦横比を維持しながら100%の幅または高さに設定する</title>
  <style>
    img {
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="画像の説明">
  </div>
</body>
</html>

このコードでは、max-width: 100%;とmax-height: 100%;プロパティを使用して、画像の最大幅と高さを親要素の幅と高さに制限しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS: 画像の縦横比を維持しながら100%の幅または高さに設定する</title>
  <style>
    .container {
      background-image: url('image.jpg');
      background-size: contain;
    }
  </style>
</head>
<body>
  <div class="container">
  </div>
</body>
</html>

このコードでは、.container要素のbackground-imageプロパティを使用して、画像を背景画像として設定しています。background-size: contain;プロパティを使用して、画像を常に表示領域内に収まるようにリサイズしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS: 画像の縦横比を維持しながら100%の幅または高さに設定する</title>
  <style>
    .container {
      position: relative;
      padding-top: 56.25%; /* 画像のアスペクト比（高さ/幅）をパーセンテージで指定 */
    }

    .container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="画像の説明">
  </div>
</body>
</html>

説明

上記のコードはあくまで一例であり、状況に合わせて調整する必要があります。
複雑なレイアウトを作成する場合は

CSSで画像の縦横比を維持しながら100%の幅または高さに設定する方法：その他のアプローチ

flexboxを使用する

Flexboxは、Webページのレイアウトを柔軟に制御するためのレイアウトモードです。画像の縦横比を維持しながら親要素にフィットさせる場合にもflexboxを使用することができます。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container img {
  flex: 1;
  max-width: 100%;
  height: auto;
}

この例では、.container要素にflexboxレイアウトを適用し、画像を中央に配置しています。flex: 1;プロパティは、画像が利用可能なスペースをすべて占めるように指示します。max-width: 100%;プロパティは、画像の幅が親要素の幅を超えないように制限します。

長所:

Flexboxは、複雑なレイアウトを簡単に作成することができます。
親要素のサイズが変更された場合、画像が自動的に再配置されます。

Flexboxは古いブラウザでは完全にはサポートされていません。

.container {
  display: grid;
  place-items: center;
}

.container img {
  grid-area: 1 / 1;
  max-width: 100%;
  height: auto;
}

CSS Gridは、非常に柔軟なレイアウトを作成することができます。
現代のブラウザで広くサポートされています。

CSS Gridは習得するのが少し難しい場合があります。

calc()関数を使用して、画像の幅と高さを動的に計算することもできます。この方法は、特に画像のサイズが事前にわからない場合に役立ちます。

.container {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 画像のアスペクト比（高さ/幅）をパーセンテージで指定 */
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}