画像に正確なHTMLのwidth属性とheight属性を指定し、CSSを使って表示幅をレスポンシブにし、高さを自動にします。寸法によって、画像をその表示サイズに固定することなく、早い段階でアスペクト比を示せます。MDN: マルチメディア画像

このガイドは、画像の読み込み前に縦横比に応じたスペースを確保しつつ、コンテナに合わせて画像をリサイズしたいMacユーザー向けです。例では自己完結型の抽象的なグラフィックを使うため、アセットをダウンロードせずにサイズ調整の動作を試せます。

寸法によって表示サイズを固定せずにスペースを確保するには？

画像には、たとえば1200×800のようなリソースの寸法と、レイアウトによって決まる表示サイズがあります。この数値は異なる場合があります。HTMLの寸法属性はサイズに関するヒントを与え、スタイルシートで表示幅と高さを上書きできます。HTML Standardでは、属性をauto 1200 / 800の形式の優先アスペクト比にも対応付けています。HTML Standard: 埋め込みコンテンツと画像の属性

1200×800のリソースの比率は3:2です。レイアウトで表示幅が決まると、リソースの読み込みが完了する前に、ブラウザーは比率に応じた高さを計算できます。MDNは、画像に関連するレイアウトシフトを減らすため、レスポンシブCSSとともに幅と高さの両方を指定することを推奨しています。MDN: マルチメディア画像

実際の役割分担はシンプルです。HTMLはリソースの寸法を記述し、CSSはページ内での収まり方を記述します。両者の記述に一貫性を持たせてください。画像を元のサイズで表示する予定がない場合でも、寸法の指定は役立ちます。

画像をコンテナいっぱいに表示するか選ぶ

画像を利用可能なコンテナ幅いっぱいに表示する場合は、以下のCSSを使います。画像にresponsive-imageクラスがあり、正確な寸法属性が指定されていることを前提とします。

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

必要に応じて画像を縮小しつつ、余裕がある場合は宣言した幅を維持するには、代わりに以下を使います。

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

2つ目のパターンは、より狭いコンテナ内に画像を収めるためのMDNの推奨方法です。このシンプルなレイアウトでは、width: 100%はコンテナを埋め、max-width: 100%は上限を設定します。どちらのパターンでもheight: autoを維持し、高さがHTMLの高さに固定されず、比率に従うようにします。MDN: マルチメディア画像

Macで完全なレスポンシブ画像ページを試す

TextEditを開き、ファイル > 新規を選び、続けてフォーマット > 標準テキストにするを選びます。以下のドキュメント全体を貼り付けます。shape-demo.htmlとして保存します。TextEditで使用する拡張子を尋ねられたら、Use .htmlを選びます。これはHTMLファイルを作成するためのApple公式手順です。Apple: MacのTextEditでHTML書類を扱う

このドキュメントにはCSSと、円と長方形を組み合わせたオリジナルの構成を含むエンコード済みSVGが入っています。追加のファイルやパッケージをインストールする必要はありません。リソースと画像要素の両方で、寸法を1200×800と宣言しています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

保存したファイルをブラウザーで開き、ウィンドウの幅を狭めます。構成は比率を保って縮小し、「Marker B」はその下に表示されます。ウィンドウの幅を広げると、例のコンテナが最大幅の900ピクセルに達するまで構成が拡大します。この最大幅はページデザインの例として選んだもので、スペースを確保する手法に必須ではありません。

埋め込みリソースはすぐに読み込まれるため、この例で確認できるのはレスポンシブなサイズ調整であり、ダウンロードの目に見える遅延ではありません。エンコード済みSVGはPythonで解析し、寸法を確認しました。以下の計算も実行済みです。準備中にブラウザーでの描画は実行していません。

別のリソースに合わせるには、srcの値を置き換え、両方のHTML寸法をそのリソースに合わせて更新します。これらの属性には1200pxではなく、1200のような単位のない整数を使います。MDNは画像寸法にこの形式を指定しています。MDN: 画像埋め込み要素

ブラウザーはどれくらいのスペースを確保する？

画像に枠線もパディングもないシンプルなレイアウトでは、予想される高さを次のように計算できます。

表示高さ = 表示幅 × リソースの高さ ÷ リソースの幅

例の1200×800という寸法を使うと、以下のような結果になります。幅はブラウザーウィンドウ全体ではなく、画像の幅を指します。

画像の表示幅 比率に応じた高さ
300 CSSピクセル 200 CSSピクセル
600 CSSピクセル 400 CSSピクセル
900 CSSピクセル 600 CSSピクセル

この計算は診断にも役立ちます。実際のリソースは1200×800なのに、HTMLで1200×600と誤って指定したとします。表示幅が600ピクセルの場合、宣言された比率からは高さが300ピクセルと示されますが、実際の比率では400ピクセル必要です。自然な比率が利用可能になったときに、最大100ピクセルの補正が生じる可能性があります。

この補正は、比率ヒントのautoの部分によるものです。自然なアスペクト比を持つ画像は、その比率が利用可能になるとその比率を使います。したがって、スタイルシートが正しくても、属性の正確さは重要です。CSS仕様では、指定された比率と置換要素の自然な比率の違いを定義しています。CSS Box Sizing Module Level 4: 優先アスペクト比

代わりにCSSのaspect-ratioを使うのはどんな場合？

レイアウトで画像ボックスの形状を意図的に決める場合は、明示的なCSS比率を使います。たとえば、正方形のタイルを作ることと、3:2の構成全体をその比率のまま表示することは、別の要件です。

以下は、完全な例に置き換えて使うCSSです。既存の.responsive-imageルールをこれに置き換えます。

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

ここではaspect-ratio: 1 / 1で正方形のボックスを指定します。幅はレスポンシブのままで、自動の高さはその幅から計算されます。優先アスペクト比がサイズ調整に影響するには、少なくとも一方の寸法が自動である必要があります。両方の寸法を明示すると、その役割はなくなります。MDN: aspect-ratio

object-fit: containを指定すると、構成全体が正方形の中に表示され、リソースの図形が埋めない部分には空きが残ります。値をcoverに変えると正方形全体を埋めますが、構成の一部は切り取られます。画像の意味ある部分が失われる可能性があるため、この動作は意図的に選んでください。MDN: object-fit

リソースの自然な比率に従う一時的な比率には、CSSでaspect-ratio: auto 3 / 2のような値も使えます。リソースの比率が異なる場合、読み込み後にボックスの比率が変わる可能性があります。autoを含まない比率は、レイアウトで優先する形状を表します。CSS Box Sizing Module Level 4: 優先アスペクト比

画像がまだシフトしたり引き伸ばされたりする場合、何を確認する？

リソースとレイアウトを次の順に確認してください。

  1. HTMLの寸法を両方確認します。 リソースの寸法が正確に記述されている必要があります。幅が正しくても高さが誤っていれば、比率も誤ったものになります。
  2. 適用されているCSSの高さを確認します。 比率に応じて表示する例では、autoである必要があります。別のルールが固定の高さを指定している可能性があります。
  3. 表示幅を確認します。 スペースの計算は、レイアウトで決まる幅に依存します。ブラウザーのサイズ変更によって幅と比率に応じた高さが変わるのは意図した動作です。
  4. 明示的な比率ルールを確認します。 CSSの正方形の比率と自然な3:2の比率は、異なるサイズ調整の意図を表します。
  5. 画像の収まり方は別途確認します。 containとcoverは、リソースをボックス内にどう収めるかを制御します。ボックスに不足している寸法を補うものではありません。

これらの確認は、要素のボックス、優先比率、その中に描画されるリソースの違いに基づいています。MDNのアスペクト比ガイドでは、明示的な寸法が比率に応じたサイズ調整にどう影響するかを説明しています。また、object-fitのリファレンスでは、画像の収め方と切り取りについて解説しています。MDN: アスペクト比を理解して設定する、MDN: object-fit

ブラウザーのサポートには範囲があります。MDNによると、CSSのaspect-ratioプロパティは2021年9月以降、広く利用可能です。これはすべての古いブラウザーでサポートされることを意味するものではなく、HTMLの寸法属性によるすべてのマッピング動作の互換性を示す日付でもありません。古いブラウザーが要件に含まれる場合は、ドキュメントの互換性情報を確認してください。MDN: aspect-ratio

一般的な比率を保った画像表示では、正確なHTML寸法とレスポンシブCSSから始めます。ページに特定のボックス形状が必要な場合は、明示的なCSS比率を使います。この2つを組み合わせることで、表示サイズをページのレイアウトに合わせながら、意図したスペースを確保できます。

出典