aspect-ratio仅约束容器宽高比，不缩放内容；必须配合width/max-width+object-fit（如cover/contain）才能实现图片等比缩放，否则容器坍缩或图片拉伸，且Safari 15.0–15.3会静默忽略，需padding-bottom降级。
aspect-ratio 本身不缩放内容，只锁容器宽高比；要实现“整体等比缩放”，必须配合 width/max-width + 相对单位 + object-fit 或相对布局控制。
为什么只写 aspect-ratio 图片没反应？
常见错误是漏掉宽度约束或冲突设置：
-
aspect-ratio必须搭配width或max-width才能生效，否则容器可能坍缩为 0 或撑满全屏 - 同时设
width: 200px和height: 150px会直接覆盖aspect-ratio，它被完全忽略 - 在 Flex 容器中，若父项设了
align-items: stretch（Flex 默认），子元素会被强行拉高，破坏比例计算；加align-self: center可修复 - Safari 15.0–15.3 会静默忽略
aspect-ratio，不报错也不渲染——真机测试不可省
aspect-ratio 和 object-fit 怎么配才不出错？
两者分工明确，缺一不可：
-
aspect-ratio只管“框”的比例（比如aspect-ratio: 4 / 3），不管里面图片怎么铺 -
object-fit决定替换元素（<img alt="html实现CSS aspect-ratio等比缩放_html宽高比aspect-ratio自适应布局【完整版】" >、<video></video>）如何填充这个框：cover裁剪居中，contain完整显示，fill强制拉满（必变形） - 示例组合：
.img-box { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .img-box img { width: 100%; height: 100%; object-fit: cover; } - 注意：
background-image对aspect-ratio完全无效——它不是替换元素，没有固有宽高
如何兼容旧版 Safari 和微信 X5 内核？
不能只靠 @supports (aspect-ratio: 1/1) 做降级，老浏览器不识别该规则，会跳过整个样式块，导致无样式 fallback：
立即学习“前端免费学习笔记（深入）”；
- 推荐 padding-bottom 百分比占位：父容器设
position: relative; width: 100%; padding-bottom: 75%（对应 4:3），再用position: absolute把<img alt="html实现CSS aspect-ratio等比缩放_html宽高比aspect-ratio自适应布局【完整版】" >填满 - 服务端或构建时注入原始宽高（HTML 的
width和height属性）仍有实际价值：SSR 首屏更稳，也是 JS 动态 fallback 的基准 - 避免在伪元素里套
padding-top：语义弱、调试难，不如显式<div class="ratio-box"> 控制清晰 <h3>图文混合容器怎么真正“等比缩放”？</h3> <p><code>aspect-ratio不改变子元素字号、间距、边框等，固定 px 值在缩放后会失衡：- 别用
margin: 10px、font-size: 16px这类绝对单位；改用rem、vmin或clamp() - 例如标题字号：
font-size: clamp(0.75rem, 2.5vw, 1.25rem)，让文字随视口线性缩放 - 卡片内图标、按钮尺寸建议用
em或flex-basis配合aspect-ratio，而非固定像素 - 如果必须用
transform: scale()，注意它不改变文档流，且会模糊文本——仅限非关键 UI 元素
真正容易被忽略的点有两个：一是 Safari 15.0–15.3 的静默失效，本地开发测不出来，上线后用户反馈才暴露；二是服务端传的原始宽高字段，不是历史包袱，而是 SSR 渲染稳定性和 JS fallback 的关键锚点。
- 别用
