图片变形的根本原因是未设置等比缩放指令：缺 height: auto、容器无尺寸上下文，或使用了 object-fit: fill 等强制拉伸方案；max-width: 100% 单独使用无效，需配合 height: auto 和 display: block 才能可靠防变形。
直接结论：拉伸变形不是图片本身的问题，而是你没给浏览器明确的“等比缩放”指令——要么缺 height: auto，要么容器没尺寸上下文，要么用了 object-fit: fill 或 background-size: 100% 100% 这类强制拉伸方案。
为什么 max-width: 100% 还是变形？
常见错觉是写了 max-width: 100% 就万事大吉，结果在 Flex 容器、Grid 布局或浮动结构里图片依然被压扁。根本原因有三个：
- 没显式写
height: auto—— 浏览器可能继承父级行高或 flex 的 stretch 行为，导致高度失控 - 父容器
display: flex且未设align-items: flex-start或flex-shrink: 0，子img被默认拉高 -
img是inline元素，底部有空白间隙，影响高度计算；加display: block最稳
最简生效组合：max-width: 100%; height: auto; display: block;
object-fit 不生效？先检查这三件事
object-fit 不是开关，它依赖渲染时的真实尺寸上下文。90% 失效都卡在这几个硬条件上：
- 容器必须有可计算的宽高：至少
width和height中一个非auto，且不能是0（用 DevTools 查 computed style 确认） -
img的display必须是block或inline-block；默认inline在某些布局中会干扰尺寸推导 - IE11 及更早版本完全不支持；降级需用
background-image+background-size: cover，但会丢alt和 SEO
典型有效写法：
.card { width: 300px; height: 200px; overflow: hidden; }<br>.card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
背景图防变形：别碰 background-size: 100% 100%
这是变形元凶之一。背景图没有语义，但控制更稳定，尤其适合装饰性图。关键点：
- 绝对禁用
background-size: 100% 100%—— 它和object-fit: fill是同一类拉伸行为 - 优先选
background-size: cover，再配background-position控制裁剪焦点（如人像用top center，产品图用bottom） - 移动端 Safari 对
background-attachment: fixed支持差，滚动易跳变，慎用；必须用时，务必加background-size: cover和明确background-position - 响应式断点里必须重设
background-size：桌面用cover，手机竖屏常需切为contain或cover+top
全屏背景图三要素：html { height: 100%; } + body { min-height: 100vh; margin: 0; } + 目标元素 height: 100vh; background-size: cover; background-position: center;
picture 和 srcset 不解决变形，只解决加载
很多人误以为用了 <picture></picture> 或 srcset 就能防变形——其实它们只管「加载哪张图」，不管「怎么显示」。变形与否仍由 CSS 决定。
-
srcset提供多分辨率资源，但渲染时仍走同一套 CSS 规则；若没配max-width: 100%; height: auto;，高分图照样拉伸 -
<picture></picture>可按媒体查询切换不同裁剪/比例的图（艺术指导），但每张图仍需各自 CSS 控制显示行为 - 真正要防变形，
<picture></picture>内每个<source></source>和最终<img>都得带相同的基础样式
容易被忽略的点：当容器本身是响应式比例容器（如轮播图）时，仅靠图片 CSS 不够，必须用 aspect-ratio 或 padding-top 技巧先撑开容器高度，否则 object-fit 没作用对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
