aspect-ratio 是最稳方案，chrome 88+、firefox 89+、safari 15.4+ 支持，不支持时 fallback 到 padding-bottom 百分比；需写为 16 / 9，搭配 width: 100% 和 height: 100% 才能使 object-fit: cover 生效，attr() 动态取值目前不被支持。
直接用 aspect-ratio 是最稳的方案，但得确认目标浏览器是否支持（Chrome 88+、Firefox 89+、Safari 15.4+ 均已支持）；不支持时 fallback 到 padding-bottom 百分比技巧，别硬套 width/height 属性。
用 aspect-ratio 控制容器比例最干净
它不依赖图片原始尺寸，也不需要 JS 或复杂嵌套，只作用于容器本身。浏览器会自动计算高度，图片只需填满即可保持比例。
-
aspect-ratio: 16 / 9写法必须带空格和斜杠，不能写成16:9或1.777 - 搭配
width: 100%和height: 100%时，object-fit: cover才能真正生效；只写width: 100%而没设容器高度，aspect-ratio会被忽略 - 不要用
aspect-ratio: attr(width) / attr(height)动态取值——目前所有主流浏览器都不支持该语法，写了等于白写 - IE 和旧版 Safari（
fallback 用 padding-bottom 百分比兼容老浏览器
这是 aspect-ratio 普及前最可靠的方案，原理是利用 padding 百分比始终按父元素宽度计算的特性来“撑高”容器。
- 16:9 →
padding-bottom: 56.25%（9 ÷ 16），4:3 →padding-bottom: 75%（3 ÷ 4） - 容器必须设
position: relative，图片设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 如果父容器宽度为 0（比如 flex 项未设
min-width: 0），padding-bottom会失效，导致高度塌陷 - 这个技巧对 SSR 友好，但语义差、维护成本高，仅建议用于需支持 IE 或 Android 4.x 的项目
别再靠 width 和 height 属性“假装控制比例”
这两个 HTML 属性在现代响应式场景中只剩两个作用：SSR 占位、低配浏览器降级。它们既不能响应父容器变化，也不能防 CLS，更无法修复错误 EXIF 导致的变形。
-
width="300"必须是纯数字，写成width="300px"就被浏览器忽略 - 同时写
width和height= 强制拉伸，不是保比；常见于 CMS 自动注入错误尺寸，结果加载时先占小框、图进来后突然撑大，触发严重布局偏移 - 当用了
srcset+sizes，这些属性就彻底沦为 fallback，浏览器最终渲染尺寸由资源选择逻辑决定，跟它们无关 - 如果你真需要固定像素输出（如广告位），应该提前用 ImageMagick 或 Sharp 缩放原图，而不是靠浏览器实时缩放
max-width: 100% + height: auto 是内容图的底线配置
这不是“保持比例”的高级技巧，而是防止变形的最低保障。它不控制容器比例，但确保图片自身不被拉伸或压扁。
- 必须写
height: auto，只写max-width: 100%会导致高度卡死在原始值上，小屏下溢出或留白 -
max-width: 100%比width: 100%更安全——父容器意外超宽时，图片不会爆炸 - 加
display: block消除行内元素默认基线留白，否则底部总有一条小缝隙 - 一旦上了
object-fit，height: auto就失效了：此时图片只是被裁剪填入，比例由容器决定，不是由图片原始尺寸决定
最容易被忽略的是：比例控制从来不是单点问题。它横跨 HTML 属性、CSS 容器、图片加载时机、响应式断点和资源交付策略。一个 aspect-ratio 写上去看似简单，但若父容器在 flex 中被 min-width: auto 锁住，或者图片还没加载完就触发了 scroll 事件监听，整个布局还是会抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
