最可靠锁定图片宽高比的方案是max-width: 100% + height: auto，但需父容器有明确宽度基准；aspect-ratio应作用于容器而非img标签，且需配合width/height和object-fit使用；仅设width属性可能失效，因依赖原始EXIF信息且易受height冲突或flex拉伸影响。
只用 width 属性最简单，但真正可靠锁定比例得靠 max-width: 100% + height: auto；aspect-ratio 是现代方案，但必须作用在容器上，不能直接写在 <img> 上。
只设 width 属性为什么有时还变形？
浏览器确实会读取图片原始宽高比并自动算 height，但前提是：width 值是纯数字（如 width="600"），不能带单位（width="600px" 会被忽略）；也不能同时存在 height 属性或 height CSS 规则——哪怕值是 auto，也可能被其他样式覆盖。
- 常见错误：
<img src="a.jpg" width="600" height="auto">——height="auto"是非法属性，浏览器直接无视 - 更隐蔽的问题：父容器用了
display: flex且没设align-items，<img>默认被拉伸到容器高度，height: auto失效 - 如果图片本身 EXIF 宽高信息损坏（比如微信下载图、CMS 重压后），浏览器算出的高度就不可信，结果仍可能失真
max-width: 100% + height: auto 的实际生效条件
这组样式不是“写了就保比”，它依赖父容器有明确宽度基准。如果父元素没宽度（比如空 <div>、flex 项未设 flex-basis），max-width: 100% 就失去参照，图片照样溢出。
- 必须确保父容器有宽度约束：比如
width: 100%、max-width: 1200px，或处于grid/flex主轴受控布局中 - 避免冲突：移除所有影响高度的规则，包括行内
height、全局img { height: 100% }等 - 小图不放大：
max-width只限制上限，原图小于该值时保持原尺寸；若要强制等比放大，得用width: 100%+height: auto，但需确认父容器不会太窄
aspect-ratio 要怎么用才不踩坑？
aspect-ratio 不能直接加在 <img> 上生效（旧版 Safari 不支持，部分浏览器渲染异常），正确做法是套一层容器，并让图片填满它。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<div style="aspect-ratio: 4 / 3; width: 100%;"><img src="a.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div> - 降级方案：不支持
aspect-ratio的浏览器可用padding-top百分比（如padding-top: 75%对应 4:3），但需配合position: relative/absolute - 注意：
object-fit必须和显式宽高一起用——只写object-fit: cover没效果，因为图片没被框住
为什么同时写 width 和 height 属性等于主动放弃比例？
HTML 的 width 和 height 属性是强制指令，浏览器完全无视原始像素比，直接缩放到你写的数值。这不是 bug，是规范行为。
- 例如原图 800×600（4:3），你写
width="300" height="200"，结果就是 3:2 拉伸变形 - 即使你手动算对了比例（如
width="400" height="300"），一旦图片源变更或 CMS 自动裁剪，比例就崩了 - 唯一例外是图标、按钮内嵌图等固定尺寸小图，且你完全掌控图片源——这种场景下强制写死反而可控
最容易被忽略的是：图片元数据（EXIF 宽高）是否真实。很多“明明只写了 width 却变形”的问题，根源不在 HTML 或 CSS，而在图片文件本身被工具重处理过，原始比例信息丢失。遇到这类情况，别调样式，先换图。
