aspect-ratio是控制宽高比的最直接方案，现代浏览器（chrome 88+、firefox 89+、safari 15.4+）支持；旧版需降级为padding-top百分比技巧配合position: relative/absolute。
只用 max-width: 100% 和 height: auto 无法真正“控制”高宽比，只能“保持”原始比例
很多人误以为加了这两条 CSS 就能稳住图片比例，其实它只是被动跟随原图 EXIF 或加载后解析出的宽高比。如果原图被裁剪过但元数据没更新，或者服务器返回的是无尺寸信息的流式 JPEG，height: auto 算出来的高度就可能错——页面先渲染一个窄高占位，等图片加载完再跳一下（CLS）。这不是 bug，是浏览器行为。
所以，“控制”高宽比的前提是：你得先定义它，而不是依赖图片自己报。
aspect-ratio 是最直接的现代方案，但要注意 fallback
写法很简单：img { aspect-ratio: 4 / 3; height: auto; }。它强制容器（包括 <img> 自身）按指定比例预留空间，不管图片是否加载、原始尺寸多少，布局都不会抖动。
兼容性方面，Chrome 88+、Firefox 89+、Safari 15.4+ 都支持，Edge 全版本跟 Chrome 一致。但 Safari 15.3 及更早会忽略该属性，此时必须降级：
- 用
padding-top百分比技巧包裹一层<div>，再把 <code><img>绝对定位进去 - 或直接在
<img>上加width: 100%; height: 0; padding-top: 75%;（对应 4:3），再用position: absolute填满 - 别忘了给父容器设
position: relative，否则绝对定位会脱标 -
cover：等比缩放并裁剪，填满整个容器——适合封面图、背景图 -
contain：等比缩放并完整显示，留白可接受——适合产品图、证件照 -
fill：强行拉伸填满——慎用，除非你明确要失真 - 注意：
object-fit对<img>有效，对background-image要用background-size
用 object-fit 控制图片在固定容器里的“填充方式”，不是控制容器比例
如果你已经用 aspect-ratio 或 padding-top 创建了一个 16:9 的盒子，那 object-fit: cover 或 contain 才起作用。它们不改变容器尺寸，只决定图片怎么塞进去：
srcset + sizes 不影响高宽比，但影响“哪个尺寸的图”参与比例计算
响应式图片的本质是让不同设备拿到合适分辨率的资源，但它不会改变你写的 aspect-ratio 或 padding-top。问题常出在这里：你写了 sizes="(max-width: 768px) 100vw, 50vw"，但实际图片在 flex 容器里只占 33%，浏览器却按 50vw 加载了 1200w 的图——结果这张大图在小盒子里又被 aspect-ratio 挤压，清晰度没提升，带宽还浪费了。
所以，sizes 的值必须和真实渲染宽度一致。可以用 Chrome DevTools 的 Layout Inspector 查看“Computed”下的 width，再反推写进 sizes。
高宽比真正容易被忽略的点，是它和加载时机的耦合：没有预设比例的容器，图片加载前高度为 0，height: auto 再快也晚了一步。防 CLS 的关键，从来不是“怎么缩”，而是“怎么提前占位”。
