为图像设置准确的 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 代码片段。它假定图像的类名为 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 上试用完整的响应式图像页面

打开文本编辑，选择 文件 > 新建，然后选择 格式 > 制作纯文本。粘贴下面的完整文档。将其保存为 shape-demo.html；如果文本编辑询问使用哪种扩展名，请选择“使用 .html”。这是 Apple 记录的创建 HTML 文件的步骤。Apple：在 Mac 上使用文本编辑处理 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 的宽高比指南解释了显式尺寸如何影响按比例缩放，而其 object-fit 参考文档说明了适配和裁剪。MDN：了解并设置宽高比，MDN：object-fit

浏览器支持也有范围限制。MDN 标记 CSS aspect-ratio 属性自 2021 年 9 月起已在各浏览器中广泛可用。这并不代表所有旧版浏览器都支持它，也不是所有 HTML 尺寸映射行为的兼容性日期。如果旧版浏览器属于你的要求，请查看文档中的兼容性信息。MDN：aspect-ratio

对于常见的按比例显示图像任务，请从准确的 HTML 尺寸和响应式 CSS 入手。如果页面需要特定的图像框形状，再使用显式 CSS 宽高比。这样既能预留所需空间，也能让显示尺寸随页面布局调整。

来源