`aspect-ratio` CSS 不是 HTML。

结论：aspect-ratio 是 CSS 属性，不是 HTML 属性。 HTML 里根本没有 aspect-ratio 这个东西，你写 <div aspect-ratio="16/9"> 永远不生效；它只能出现在样式表或 style 属性里，写成 aspect-ratio: 16 / 9;。HTML 侧唯一能给浏览器提供宽高比信息的地方，是 <img>、<iframe> 这类替换元素上的 width 和 height 属性。

为什么 aspect-ratio 不能写在 HTML 标签上？

结论：因为 HTML 对未知属性是「静默忽略」，不报错、不警告、不生效。

HTML 属性和 CSS 属性是两套彼此独立的系统。class、src、width、height、loading 这些由 HTML 规范定义，会被解析成 DOM 特性；而 aspect-ratio 定义在 CSS Box Sizing Module Level 4（CSS 盒模型规范第 4 版）里。往标签上写 aspect-ratio="16/9"，浏览器只会把它当成一个自定义属性塞进 element.attributes，然后什么都不做。正确写法只有两种：

<div style="aspect-ratio: 16 / 9;"></div>

.box { aspect-ratio: 16 / 9; }

另外注意，aspect-ratio 对非替换的行内元素（比如裸 <span>）无效，得先把 display 设成 block、inline-block、flex 或 grid。

aspect-ratio 和 <img> 的 width/height 属性有什么区别？

结论：<img width height> 提供的是「固有宽高比」，属于 HTML；aspect-ratio 指定的是盒子的「首选宽高比」，属于 CSS，两者用途不同、可以并用。

<img src="a.jpg" width="800" height="450"> 里的 width/height 是无单位数字，按 CSS 像素解释。浏览器在图片字节还没下载完时，就能用 800:450 = 16:9 预留出正确高度的占位空间，这就是防 CLS（Cumulative Layout Shift，累计布局偏移）的标准做法。这两个属性同时会作为「呈现提示」映射到 CSS 的 width/height，所以实践中必须配一句 img { max-width: 100%; height: auto; } 把它压回自适应，否则图片在窄屏会被撑破。

aspect-ratio 怎么写才生效？

结论：宽、高两个维度里至少有一个必须是 auto，否则 aspect-ratio 会被完全忽略。

.card {
  width: 320px;
  aspect-ratio: 16 / 9; /* 高度自动算成 180px */
}

如果写成 width: 320px; height: 180px; aspect-ratio: 4 / 3;，比例声明直接失效——两个轴都被定死了。语法细节上：16 / 9 等价于 1.7778；1 / 1 可简写成 1；还可以写成 aspect-ratio: auto 16 / 9，表示优先用元素自身的固有比例（如图片原始尺寸），没有时才退回 16:9。

另一个高频坑：在 flex 或 grid 子项上，默认的 align-items: stretch 会把交叉轴尺寸撑满，比例同样失效。解决方式是给子项加 align-self: start，或补一句 min-height: 0（纵向排列时是 min-width: 0）。

不支持 aspect-ratio 的浏览器怎么办？

结论：aspect-ratio 从 Chrome/Edge 88（2021 年 1 月）、Firefox 89（2021 年 6 月）、Safari 15（2021 年 9 月）开始支持，目前全球覆盖率已超过 95%；要兜底更老的浏览器，用 padding 百分比 hack。

传统写法是把高度撑成宽度的百分比：

.box::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 9 / 16 */
}

padding 的百分比永远基于父元素宽度计算，所以 16:9 对应 56.25%，4:3 对应 75%，1:1 对应 100%。也可以配合 @supports (aspect-ratio: 1 / 1) { … } 做特性检测，让新浏览器走 aspect-ratio、旧浏览器走 padding hack，两边都不吃亏。

收尾

记住三句话：aspect-ratio 只能写在 CSS 里，写在 HTML 标签上必定无效；HTML 侧要预留比例，用 <img> 的 width/height 属性加 height: auto；用 CSS 的 aspect-ratio 时保证至少一个维度是 auto，并留意 flex/grid 的 stretch 会把它吃掉。