最稳方案是max-width: 100%配height: auto，因浏览器优先尊重原始宽高比，max-width设宽度上限不强制拉伸，height: auto确保高度等比缩放；只写width: 100%则高度卡死导致拉伸变形。
直接设 max-width: 100% + height: auto 就能防止拉伸，这是最稳、兼容性最好、出错率最低的方案；其他写法要么需要额外约束条件，要么在特定浏览器或布局中失效。
为什么只写 width: 100% 会拉伸图片
浏览器看到 width: 100% 但没配 height: auto，就会把高度按默认值（通常是图片原始高度）渲染，不随宽度变化——结果就是宽度被撑开，高度卡死，图片横向拉长。更隐蔽的问题是：在 flex 容器里，align-items: stretch 会强制拉高图片，哪怕你写了 height: auto，也得额外加 min-height: 0 才生效。
-
width: 100%单独用 → 高度不联动，必然变形 -
width: 100%; height: 100%→ 宽高都锁死，完全无视原始比例 -
max-width: 100%; height: auto→ 安全：小图不放大，大图不溢出，比例始终守得住
object-fit 不是万能解药，必须配尺寸基准
object-fit: contain 或 cover 只负责“怎么摆图”，不管“盒子多大”。如果 <img> 自身没宽高、父容器 height: auto、或者 flex 项没设 min-height: 0，那 object-fit 就没作用对象——Safari 旧版尤其容易卡在这里。
- 必须先有可计算的宽高：比如
width: 300px; height: 200px，或父容器带aspect-ratio -
object-fit: contain适合证件照、商品图等需完整显示的场景 -
object-fit: cover适合封面图，但要注意裁剪风险——窄高容器里可能只露出额头 - 别忘了加
display: block，否则object-fit在 inline 元素上可能行为异常
aspect-ratio 是现代最优解，但降级要到位
Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio，写法干净：aspect-ratio: 16 / 9。但它只对块级容器生效，且不能动态读取图片真实宽高比（attr(width)/attr(height) 几乎不被支持）。
- 推荐组合：
.img-wrapper { width: 100%; aspect-ratio: 4 / 3; }+img { width: 100%; height: 100%; object-fit: cover; } - 旧版 Safari（≤15.2）必须 fallback：用
padding-bottom: 75%（对应 4:3）模拟比例，且父容器要设position: relative，<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别指望服务端注入的宽高属性能被 CSS 直接读取——
aspect-ratio: attr(width)/attr(height)现阶段基本不可用
真正容易被忽略的点是：所有方案都依赖图片有 intrinsic 尺寸（即原始像素宽高）。如果图源本身宽高比混乱，或通过 CMS 动态生成时没附带元数据，再好的 CSS 也救不了比例——这时候得从源头校验图片尺寸，而不是在前端硬调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
