图片拉伸变形源于浏览器默认强行拉伸img至容器尺寸而不保持宽高比，解决关键在于使用object-fit控制适配方式：cover等比裁剪填满，contain等比留白显示；需配合width/height设置，IE需背景图fallback，并注意object-position锚点调整及flex/grid中min-size和max-size的影响。
图片被拉伸变形是因为默认的 img 渲染行为
浏览器对 img 元素默认采用「保持宽高比 + 填满容器」的逻辑，但实际是「强行拉伸到容器尺寸」，不考虑原始比例。只要容器宽高比和图片不一致，就必然变形。
解决的关键不是调 width/height，而是用 object-fit 控制内容如何适配容器框。它只对替换元素（如 img、video）生效，普通 div 用不了。
-
object-fit: cover：等比缩放并裁剪，确保填满容器（常用于头图、卡片图） -
object-fit: contain：等比缩放并完整显示，留白不可避免（适合证件照、图标预览） - 别漏写
object-fit的配套设置——必须同时设width和height，否则没效果 - IE 完全不支持
object-fit，需要 fallback 方案（比如用背景图 +background-size）
用 object-fit: cover 时常见裁剪错位
默认从图片中心开始裁剪，但有时你想保留左上角人脸或 logo，就得配合 object-position 调整锚点。
-
object-position: 0 0锚定左上角（图片左上对齐容器左上） -
object-position: 100% 50%锚定右中（适合右侧有主体的图） - 值可以是像素、百分比、关键词（
left/top/center等），顺序是x y - 注意：移动端 Safari 旧版本对非百分比
object-position支持不稳定，优先用50% 50%或0 0
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: 20% 30%;
}
为什么 contain 在 flex 或 grid 容器里容易失效
当 img 在 flex 或 grid 子项中，父容器可能压缩子项尺寸，导致 object-fit: contain 没足够空间展示完整图片，反而出现意外留白或缩小。
立即学习“前端免费学习笔记（深入）”；
- 先检查父容器是否设置了
min-width: 0或min-height: 0（flex/grid 默认会阻止收缩） - 给
img加max-width: 100%和max-height: 100%，防止它撑开容器 - 如果容器本身尺寸不固定（比如响应式卡片），
contain的表现会随容器变化，不如cover稳定 - 某些安卓 WebView 对
object-fit: contain的渲染有偏移 bug，可加vertical-align: top缓解
替代方案：不用 object-fit 怎么实现类似效果
当需要兼容 IE 或遇到 SSR 渲染不一致时，得退回到背景图方案，但要注意语义和可访问性损失。
- 用
div包裹，设background-image，再用background-size: cover/contain - 必须加
aria-label或alt的等效文案（因为背景图无法被读屏器识别） -
background-position对应object-position，语法一致 - 动态换图时，JS 修改
style.backgroundImage不如直接换img.src可靠，缓存和加载状态更难控制
复杂点在于：你得同时维护样式逻辑和语义逻辑，而 object-fit 是把这两件事绑在同一个 HTML 元素上的干净解法——只要浏览器支持得住。
