HTMLとCSSで画像のアスペクト比を維持する方法

2024-06-26

HTMLとCSSで画像のアスペクト比を維持する方法

HTMLでは、imgタグを使用して画像を挿入します。アスペクト比を維持するには、widthとheight属性を適切に設定する必要があります。

以下の例では、幅を100%に設定し、高さを自動調整することで、画像のアスペクト比を維持しています。

<img src="image.jpg" width="100%" height="auto">

CSSを使用して、画像のアスペクト比をさらに制御することができます。以下のプロパティが役立ちます。

object-fit: このプロパティは、画像がコンテナ内にどのようにフィットするかを制御します。contain値を使用すると、画像がコンテナ内に収まるように拡大縮小されますが、アスペクト比は維持されます。
aspect-ratio: このプロパティは、画像のアスペクト比を明示的に設定します。このプロパティを使用すると、widthとheight属性を個別に設定する必要がなくなります。

以下の例では、object-fit: containを使用して、画像がコンテナ内に収まるように拡大縮小され、アスペクト比が維持されるようにしています。

img {
  object-fit: contain;
}

上記の方法に加えて、以下の方法でも画像のアスペクト比を維持することができます。

padding-top: CSSのpadding-topプロパティを使用して、画像の上部に余白を追加することで、アスペクト比を維持することができます。この方法は、特に正方形の画像に有効です。
background-image: CSSのbackground-imageプロパティを使用して、画像を要素の背景として表示することで、アスペクト比を維持することができます。この方法は、画像を装飾的に使用する場合に有効です。

注意点

上記の方法は、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、画像が正しく表示されない場合があります。
画像を縮小する場合、画質が低下する可能性があります。

HTMLとCSSで画像のアスペクト比を維持するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像のアスペクト比を維持</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

CSS

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

このコードは、以下のことを行います。

img要素にmax-width: 100%;プロパティを設定することで、画像の幅を最大100%に制限します。
img要素にheight: auto;プロパティを設定することで、画像の高さを自動的に調整します。

この結果、画像がコンテナ内に収まるように拡大縮小され、アスペクト比が維持されます。

以下の例は、CSSのobject-fitプロパティを使用して、画像のアスペクト比を維持する方法を示しています。

img {
  object-fit: contain;
}

上記はあくまでも一例であり、状況に合わせてコードを変更する必要があります。例えば、画像を特定のサイズに固定したい場合は、widthとheight属性を個別に設定する必要があります。

また、古いブラウザでは、CSSのすべてのプロパティが完全にサポートされているわけではないことに注意する必要があります。

HTMLとCSSで画像のアスペクト比を維持するその他の方法

以下の例では、padding-topプロパティを使用して、画像の上部に画像の高さと同じ余白を追加しています。

img {
  display: block;
  padding-top: 100%; /* 画像の高さと同じ余白を追加 */
}

以下の例では、background-imageプロパティを使用して、画像を要素の背景に設定しています。

.image-container {
  background-image: url('image.jpg');
  background-size: contain; /* 画像がコンテナ内に収まるように拡大縮小 */
  background-position: center; /* 画像を中央に配置 */
}

SVGを使用する

SVG (Scalable Vector Graphics) は、ベクターグラフィックの形式であり、解像度に依存せずにアスペクト比を維持することができます。そのため、画像のアスペクト比を維持することが重要な場合は、SVG画像を使用することを検討することができます。

以下の例は、SVG画像をWebページに埋め込む方法を示しています。

<svg width="100%" height="auto">
  <image href="image.svg" alt="画像の説明">
</svg>

JavaScriptを使用して、画像のアスペクト比を動的に調整することもできます。この方法は、より複雑なレイアウトを作成する必要がある場合に役立ちます。

以下の例は、JavaScriptを使用して、画像の幅と高さをウィンドウのサイズに合わせて調整する方法を示しています。

function adjustImageAspectRatio() {
  const image = document.querySelector('img');
  const container = image.parentNode;

  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;

  const imageAspectRatio = image.naturalWidth / image.naturalHeight;

  if (containerWidth / containerHeight > imageAspectRatio) {
    image.width = containerWidth;
    image.height = containerWidth / imageAspectRatio;
  } else {
    image.width = containerHeight * imageAspectRatio;
    image.height = containerHeight;
  }
}

window.addEventListener('resize', adjustImageAspectRatio);
adjustImageAspectRatio();

どの方法を選択するかは、状況によって異なります。以下の点を考慮する必要があります。

画像の種類 (JPEG、PNG、SVGなど)
レイアウトの複雑さ
ブラウザサポート

一般的には、max-width: 100%;とheight: auto;のプロパティを使用する方法は、シンプルで汎用性が高いのでおすすめです。しかし、より複雑なレイアウトを作成する必要がある場合は、padding-top、background-image、SVG、またはJavaScriptを使用する方が良い場合があります。