aspect-ratio写在上无效，因是替换元素，浏览器优先尊重其固有宽高比，忽略css声明；应加在外层块级容器上，配合width/max-width、object-fit:cover及height:100%生效。
aspect-ratio 写在 <img> 上为什么没反应
浏览器会优先尊重 <img> 的固有宽高比（intrinsic aspect ratio），直接忽略你写的 aspect-ratio 声明。这不是 bug，是规范行为——<img> 是替换元素，天生带尺寸语义。
正确做法是把 aspect-ratio 加在外层容器上，比如 <div class="img-container"><img src="..."></div>，再让图片通过 CSS 控制填充方式。
- 别给
<img>直接加aspect-ratio，哪怕只是测试也无效 - 保留 HTML 的
width和height属性（如<img style="max-width:90%" style="max-width:90%">），有助于 SSR 阶段推导初始比例、减少 CLS - 如果用了 SSR 或静态生成，去掉这两个属性会导致首屏渲染时容器高度为 0，后续图片加载才撑开，引发明显跳动
容器必须配 width 或 max-width 才生效
aspect-ratio 不是独立生效的属性，它需要一个明确的宽度基准来推算高度。只写 aspect-ratio: 16 / 9，容器可能塌缩为 0，也可能撑满整个父容器，完全不可控。
常见错误包括：
- 同时写了
height: 200px—— 显式height会静默覆盖aspect-ratio的高度计算逻辑 - 父容器是
display: flex，子项默认align-items: stretch，强行拉高容器，破坏比例；加align-self: center或align-self: start可修复 - 在
position: absolute元素上用aspect-ratio—— 它对脱离文档流的元素无效
推荐写法：width: 100%; max-width: 400px; aspect-ratio: 4 / 3;。宽度自适应且有上限，高度由比例自动计算。
object-fit 和 aspect-ratio 必须配合使用
aspect-ratio 只管“框”，object-fit 才管“图”。两者分工不同，缺一不可：
-
aspect-ratio: 4 / 3只保证容器是 4:3 的空盒子，不控制里面图片怎么铺 -
object-fit: cover让图片等比缩放后居中裁剪填满整个框（最常用） -
object-fit: contain让图片完整显示，四周可能留白；需配合background-color防止难看空白 -
object-fit仅对替换元素（<img>、<video></video>）有效，对background-image完全无效
示例组合：
.img-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; }
Safari 15.3 及更早版本需要降级 fallback
Safari 15.0–15.3 会静默忽略 aspect-ratio，不报错也不渲染。真机测试不可省，尤其 iOS 15.2 用户仍有一定占比。
降级方案仍用经典的 padding-top 百分比 hack，但顺序和写法很关键：
- 现代写法优先：先写
aspect-ratio，再写padding-bottom，旧版 Safari 会跳过前者、执行后者 - 错误写法：把
padding-bottom放前面，可能导致支持者也误用 fallback，高度异常 - 子元素必须加
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则 padding 撑开的高度会被内容顶出 - 自定义比例（如 21 / 9）要手动算百分比：9 ÷ 21 ≈ 42.857%，写成
padding-bottom: 42.857%
真正容易被忽略的是：降级方案里，padding-bottom 的值必须基于宽度计算，且不能和 flex 或 grid 的自动尺寸逻辑混用——一旦父容器用了 display: grid，这套 fallback 就大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
