最可靠方案是max-width: 100%; height: auto;，前提是父容器有可计算宽度且无干扰；width: 100%会强制撑满导致变形，object-fit仅适用于固定尺寸容器内控制缩放方式。
直接加 max-width: 100% 和 height: auto 就能解决绝大多数拉伸问题——但前提是父容器有可计算宽度，且没被其他 CSS 干扰高度推算。
为什么只写 width: 100% 会拉伸变形
它强制图片撑满父容器宽度，却不管原始比例。浏览器不会自动调整高度，结果要么高度塌陷（显示不全），要么你手动写死 height（直接破坏宽高比）。width: 100% 是“必须占满”，max-width: 100% 是“最多占满”，图片小时保持原尺寸。
缺了 height: auto，浏览器可能用默认 height: auto，也可能继承父级或受 line-height 影响，导致高度异常。
- 别在
<img>上同时写width: 100%和max-width: 100%，Safari 旧版可能因此重排异常 - HTML 中硬编码
width或height属性（如width="800"）会覆盖 CSS，尤其在 IE 和部分现代浏览器中优先级更高 - 父容器是
flex且未设align-items或min-height，子<img>可能被压缩或拉伸
object-fit 什么时候必须加
只在容器尺寸固定（比如卡片、轮播图项、Grid 项）时才需要 object-fit。它本身不解决响应式缩放，而是解决“图片怎么塞进一个已知宽高的盒子里”。
单独写 object-fit 没效果——容器必须有明确宽高，否则图片盒模型尺寸为 0 或由内容撑开。
-
object-fit: cover：适合 Banner、封面图，裁切但不拉伸，需配合width和显式值；常配object-position: center top防止人脸被切 -
object-fit: contain：适合头像、图标、证件照，完整显示但可能留白；此时object-position几乎无效 -
object-fit: fill就是你要避免的拉伸行为，别用
父容器没宽度时图片不缩放怎么办
常见于 position: absolute、float、Flex/Grid 子项未约束尺寸，或外层 div 宽度未定义。此时 max-width: 100% 失效，因为“100%”没参照物。
用 DevTools 查看 computed width，确认父容器是否真有值（不是 auto 或 0px）。
- Flex 容器中，确保没设
flex-shrink: 0，否则图片拒绝缩小 - Grid 布局里，图片外层容器建议加
aspect-ratio: 4/3，防止加载前高度塌陷 - 若父容器是
inline-block或display: table-cell，需额外设width或min-width - 最易被忽略的是图片加载前的布局抖动：浏览器对未加载图片的 intrinsic size 推算不准，
height: auto可能暂时失效。加aspect-ratio或用srcset配合sizes提前告知尺寸，比 JS 占位更轻量也更可靠
iOS Safari 13.3 及以下的兼容性陷阱
这不是样式没加载，而是引擎级不识别：object-fit 在 iOS Safari 13.3 及之前完全不生效，加 -webkit-object-fit 也无效，会退化成 fill 行为（即拉伸）。
稳妥降级方案：用 background-image + background-size: cover 替代，但会丢失 alt、SEO 和原生懒加载。
如果必须用 <img>，可用 @supports (object-fit: cover) 包裹关键样式，并对不支持的环境 fallback 到 padding-top 技巧（如 padding-top: 75% 模拟 4:3）+ 绝对定位图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
