直接给加aspect-ratio无效，因其是替换元素，浏览器优先采用固有宽高比或html的width/height属性，忽略css声明；必须用块级容器包裹并设置aspect-ratio，同时满足有明确宽度、未设height、配合object-fit及width:100%;height:100%，旧浏览器需用padding-bottom百分比降级。
直接给 <img> 加 aspect-ratio 没用
浏览器会忽略它——<img> 是替换元素，其渲染优先级由固有宽高比和 HTML width/height 属性决定，CSS 的 aspect-ratio 不参与计算。实测现象包括：容器高度为 0、图片按默认 300×150 渲染、加载后突然下跳。
必须用块级容器包裹：<div class="img-wrapper"><img src="..."></div>，然后把 aspect-ratio 写在 .img-wrapper 上。
aspect-ratio 必须配明确宽度才生效
它本身不定义尺寸，只定义比例；没有宽度基准，浏览器无法推导高度，容器可能塌成一条线或撑满视口。
-
width: 100%或max-width: 400px是最常用且安全的宽度来源 - 不能只写
aspect-ratio: 16 / 9，否则静默失效 - 显式声明
height（含height: auto）会覆盖aspect-ratio的高度计算 - 语法必须严格：空格 + 斜杠，即
16 / 9，不能写成16:9、16/9或1.777
object-fit 和 aspect-ratio 必须一起用
aspect-ratio 只管“盒子”多高，不管里面图片怎么铺。没配 object-fit，<img> 会按默认行为拉伸填充，极易糊掉或裁半。
-
<img>必须设width: 100%且height: 100%，否则object-fit不触发 -
object-fit: cover：等比缩放后居中裁剪填满（封面图首选） -
object-fit: contain：完整显示，四周留白；建议加background-color防空白难看 -
object-fit对background-image完全无效——它不是替换元素
旧浏览器必须手动降级，@supports 不是可选
iOS Safari 15.4 之前、Chrome Android 100 之前、Firefox Android 102 之前均静默忽略 aspect-ratio。不降级会导致容器高度归零，CLS（累积布局偏移）更严重。
可靠 fallback 是 padding-bottom 百分比方案：
- 16:9 →
padding-bottom: 56.25%（9 ÷ 16） - 4:3 →
padding-bottom: 75%（3 ÷ 4） - 父容器设
position: relative，子<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别指望构建工具自动注入——必须手写
@supports not (aspect-ratio: 1 / 1)块，并真机验证
Flex/Grid 布局里还要额外加 min-width: 0 和 min-height: 0，否则 padding 方案也容易塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
