aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持，旧版 Safari 和部分安卓 WebView 不支持；需用 padding-bottom 百分比 hack 或 JS 降级，并注意与 object-fit 等配合控制内容渲染。
aspect-ratio 在现代浏览器中是否能直接用
能，但得看目标浏览器版本。Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio，旧版 Safari（15.3 及更早）和部分安卓 WebView 会忽略该属性，不报错也不生效。
如果你的用户基本在 Chrome/Firefox/macOS Safari 15.4+ 上，可以直接上；如果还要兼容 iOS 15.3 或微信内置浏览器（多数基于旧版 WKWebView），就得备选方案。
常见错误现象：aspect-ratio: 16 / 9 写了但容器高度没变化，检查 DevTools 的 Computed 面板——若 aspect-ratio 被划掉或没出现，大概率是浏览器不支持。
aspect-ratio 的取值和常见写法差异
aspect-ratio 接收一个比值（如 16 / 9）或单个数字（如 1.777），但语义不同：前者是宽高比（width / height），后者是纯数值，会被当作 width / height = 数值 / 1 处理。
实际使用中建议统一用分数形式，避免歧义。比如想让容器是正方形，写 aspect-ratio: 1 / 1 比 aspect-ratio: 1 更明确；想做 4:3，就写 aspect-ratio: 4 / 3，别写 1.333。
注意点：
-
aspect-ratio只对块级元素或 display 为block、inline-block、flex、grid的元素生效，display: inline不行 - 它不会覆盖显式设置的
height，如果同时写了height: 200px和aspect-ratio: 16 / 9，高度以height为准，aspect-ratio被忽略 - 它只控制「内在尺寸」，不解决内容溢出问题，需配合
overflow或object-fit（针对图片）等进一步处理
不支持 aspect-ratio 时怎么降级
最稳妥的降级是「padding-bottom 百分比 hack」：利用子元素绝对定位 + 父容器 padding-bottom 占位来模拟比例。
例如实现 16:9：
div.ratio-16by9 {
position: relative;
width: 100%;
}
div.ratio-16by9::before {
content: "";
display: block;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
}
div.ratio-16by9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这个方法兼容所有浏览器，但结构稍重，且需要确保子元素用绝对定位撑满。另一个轻量替代是 JS 动态计算高度（如监听 resize 并设 el.style.height = el.offsetWidth * 0.5625 + "px"），但有性能顾虑，适合低频变动场景。
容易踩的坑：
- padding-bottom 百分比是相对于父容器宽度计算的，所以父容器必须有明确宽度（不能是
max-content或未设宽的 flex item） - 如果容器本身是 flex item 且没设
flex-basis，可能宽度坍缩导致 padding 计算异常 - 不要在同一个元素上既用
aspect-ratio又用 padding-hack，CSS 会优先应用aspect-ratio（支持时），但维护成本变高
aspect-ratio 和 object-fit / background-size 配合要点
aspect-ratio 只管容器尺寸，不管里面的内容怎么铺。图片拉伸、裁剪、居中，还得靠 object-fit（background-size（背景图）。
典型组合：
- 响应式卡片带图：
div { aspect-ratio: 4 / 3; } img { width: 100%; height: 100%; object-fit: cover; } - 全屏横幅图：
div { aspect-ratio: 21 / 9; background-image: url(...); background-size: cover; background-position: center; }
关键提醒：如果图片本身尺寸远小于容器，仅靠 object-fit: cover 会模糊；此时应优先用 srcset 提供多分辨率图，而不是依赖 CSS 拉伸。
复杂点在于，当容器用 aspect-ratio + max-width 响应式缩放时，内部图片的渲染质量、加载时机、以及是否触发懒加载，都得一并考虑——这些不是 aspect-ratio 能解决的，但常被一起忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
