最省事用aspect-ratio，但需兼容旧浏览器时得用padding-top百分比+绝对定位；只设width不写height会变形，因依赖naturalwidth/naturalheight，而元数据损坏会导致高度塌陷。
直接用 aspect-ratio 最省事，但老浏览器不支持；真要兼容 IE11 或旧版 Safari，得用 padding-top 百分比 + 绝对定位那套方案。
为什么只设 width 不写 height 还是会变形
常见错觉：以为只写 width="400" 就万事大吉。其实浏览器确实会自动算 height，但前提是原始图片的宽高比没被破坏过——比如你上传了一张被 PS 拉伸过的图，或者后端接口返回的“原图”本身比例就错乱，那自动推算出来的高度照样失真。
验证方法很简单：console.log(img.naturalWidth, img.naturalHeight) 看控制台输出是否符合预期比例。
- 只设
width属性时，浏览器按img.naturalWidth / img.naturalHeight推算显示高度 - 如果原始图元数据损坏（常见于某些 CMS 二次压缩、微信公众号导出图），
naturalWidth可能读成 0 或异常值，导致高度塌陷 - 此时必须靠 CSS 强制兜底，不能依赖 HTML 属性自动推算
aspect-ratio 在现代项目里怎么安全启用
aspect-ratio: 16 / 9 写起来爽，但 Chrome 88+、Firefox 89+、Safari 15.4+ 才真正稳定支持。如果你的项目明确不支持 Safari ≤15.3，可以直接上；否则得加降级。
推荐写法：
img {
aspect-ratio: 16 / 9;
height: auto;
}
@supports not (aspect-ratio: 1 / 1) {
img {
width: 100%;
}
img::before {
content: "";
display: block;
padding-top: 56.25%; /* 9/16 */
}
img > img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
}
}
-
@supports检测比 UA 判断更可靠，避免误伤新版 Safari - 不要在
<img>上直接用padding-top，它不是块级元素，会失效；必须包一层容器或用伪元素 -
object-fit: cover要配合显式宽高才生效，单独写没用
object-fit 和 max-width: 100% 一起用为什么有时没反应
典型现象：写了 img { max-width: 100%; height: auto; object-fit: cover; }，结果图片还是溢出容器、没裁剪。
根本原因：object-fit 只在元素有**明确宽高约束**时起作用。而 max-width: 100% 是上限，不是固定尺寸；height: auto 更是彻底放弃高度控制——等于没给 object-fit 提供“容器边界”。
- 正确做法：给父容器设固定
width和height，或用aspect-ratio锁定比例，再让<img>填满它 - 简配方案：用
width: 100%; height: 0; padding-top: 56.25%;创建容器，再把<img>绝对定位进去 - 别指望
object-fit在流式布局里“自适应裁剪”，它不是响应式魔法，只是适配规则
最易忽略的一点：所有这些方案都依赖图片加载完成后的自然尺寸。如果用了懒加载（loading="lazy"）又没预留占位空间，CLS（累积布局偏移）会立刻拉胯——所以哪怕用 aspect-ratio，也建议配合 width 和 height 属性提供初始尺寸 hint。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
