為圖片設定準確的 HTML width 和 height 屬性，再使用 CSS 讓圖片顯示寬度具響應性、高度自動調整。這些尺寸會提前提供長寬比，但不會將圖片鎖定在該顯示尺寸。MDN：多媒體圖片

本指南適用於在 Mac 上編輯 HTML 頁面，並希望圖片能隨容器縮放，同時在載入前預留等比例空間的使用者。範例使用自成一體的抽象圖形，因此你可以在不下載素材的情況下試用尺寸調整效果。

如何在不固定顯示尺寸的情況下預留空間？

圖片有資源尺寸，例如 1200 × 800，並有由版面配置決定的顯示尺寸。這些數值可以不同。HTML 尺寸屬性會提供尺寸提示；樣式表可以覆寫顯示寬度和高度。HTML 標準也會將這些屬性對應為偏好長寬比，格式為 auto 1200 / 800。HTML 標準：嵌入內容與圖片的屬性

對於 1200 × 800 的資源，長寬比為 3:2。版面配置確定顯示寬度後，瀏覽器便可在資源載入完成前計算出等比例的高度。MDN 建議同時提供兩個尺寸和響應式 CSS，以減少圖片造成的版面位移。MDN：多媒體圖片

實際上，兩者的分工很簡單：HTML 描述資源尺寸，CSS 描述資源如何配合頁面。請讓這兩項描述保持一致。即使圖片永遠不會以原始尺寸顯示，提供尺寸仍然有用。

選擇圖片是否要填滿容器

如果圖片應填滿容器的可用寬度，請使用以下 CSS 片段。假設圖片的 class 為 responsive-image，且尺寸屬性準確：

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

如果圖片只需在必要時縮小，並在空間較充裕時保留宣告的寬度，請使用以下替代片段：

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

第二種寫法是 MDN 記載的做法，可讓圖片保持在較窄的容器範圍內。在這個簡單版面中，width: 100% 會填滿容器，而 max-width: 100% 則設定上限。兩種寫法都應保留 height: auto，讓高度依照長寬比調整，而不是固定在 HTML 中指定的高度。MDN：多媒體圖片

在 Mac 上試用完整的響應式圖片頁面

開啟 TextEdit，選擇 File > New，再選擇 Format > Make Plain Text。貼上下方的完整文件。將它儲存為 shape-demo.html；如果 TextEdit 詢問要使用哪個副檔名，請選擇 Use .html。這些是 Apple 記載的建立 HTML 檔案步驟。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 尺寸，使其符合該資源。這些屬性請使用 1200 這類不帶單位的整數，而非 1200px。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 盒模型尺寸模組第 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 盒模型尺寸模組第 4 級：偏好長寬比

如果圖片仍然位移或變形，該檢查什麼？

請依照以下順序檢查資源與版面：

  1. 確認兩個 HTML 尺寸。 它們應準確描述資源。即使寬度正確，只要高度錯誤，提供的長寬比仍然不正確。
  2. 檢查套用的 CSS 高度。 在等比例範例中，它應為 auto。其他匹配的規則可能指定了固定高度。
  3. 檢查顯示寬度。 預留空間的計算取決於版面配置所確定的寬度。調整瀏覽器大小會刻意改變寬度和等比例高度。
  4. 檢查明確的長寬比規則。 方形 CSS 長寬比和 3:2 自然長寬比代表不同的尺寸設計意圖。
  5. 另外檢查圖片填滿方式。 contain 和 cover 控制資源在框內的配合方式；它們不會補上框缺少的尺寸。

這些檢查反映了元素的方框、偏好長寬比，以及在框中呈現的資源三者之間的差異。MDN 的 aspect-ratio 指南說明明確尺寸如何影響等比例調整，而 object-fit 參考資料則說明填滿與裁切。MDN：了解並設定長寬比，MDN：object-fit

瀏覽器支援也有其範圍。MDN 標示 CSS aspect-ratio 屬性自 2021 年 9 月起已廣泛適用於各瀏覽器。這並不代表所有較舊的瀏覽器都支援，也不是所有 HTML 尺寸對應行為的相容性日期。如果需求包含較舊的瀏覽器，請查看文件中的相容性資訊。MDN：aspect-ratio

若是一般的等比例圖片需求，請從準確的 HTML 尺寸和響應式 CSS 開始。如果頁面需要特定的方框形狀，再使用明確的 CSS 長寬比。搭配使用這些設定，就能預留預期空間，同時讓顯示尺寸隨頁面版面調整。

來源