小屏幕图片变形源于宽高比失控；设 width: 100% 未设 height 会导致拉伸，object-fit: cover 可等比缩放并裁剪填满容器，但需容器有显式宽高才生效。
小屏幕下图片变形的根源是宽高比失控
直接给 <img> 设 width: 100% 但没设 height，浏览器会按原始尺寸缩放，一旦容器高度受限（比如卡片固定高、flex 项被压缩），图片就会被拉伸或压扁。这时候靠 object-fit 不是“修复”，而是接管渲染逻辑——它决定图片内容如何适配容器框，而非改变容器本身。
用 object-fit: cover 保持宽高比并填满容器
适用于封面图、头像、轮播图等允许裁剪的场景。图片等比缩放后居中，超出容器的部分被裁掉，容器始终被填满。
关键点：
-
object-fit必须配合显式设置容器宽高才生效（比如width: 100%; height: 200px或aspect-ratio: 16/9） - 只对
<img>和<video>生效，background-image得用background-size: cover - 在旧版 Safari（-webkit-object-fit: cover
- 别忘了设
overflow: hidden防止裁剪失效（尤其 flex 容器里）
<img src="hero.jpg" style="width: 100%; height: 300px; object-fit: cover;">
用 object-fit: contain 完整显示图片且不拉伸
适合产品图、图表、证件照等必须看清全貌的场景。图片等比缩放后完整居中，容器内留白，但比例绝对不变。
立即学习“前端免费学习笔记（深入）”；
常见误区：
- 设了
contain却没限制容器高度 → 图片按原始尺寸渲染，留白可能出现在底部外侧，视觉上仍像“没起作用” - 和
max-width: 100%混用时，优先级容易混乱；建议统一用width: 100%; height: auto+object-fit: contain+ 固定容器aspect-ratio - 在 Grid/Flex 子项中，若父容器未设
align-items: center，图片默认顶对齐，留白全在下方
<div style="width: 100%; aspect-ratio: 4/3; display: flex; align-items: center;"> <img src="product.png" style="width: 100%; height: 100%; object-fit: contain;"> </div>
移动端真正要防的是 viewport 和图片源适配断层
object-fit 解决的是“怎么画”，但小屏下更常出问题是“画什么”。比如高清屏加载了 2x 尺寸的图却没做 srcset，或 viewport 缩放被禁用导致 CSS 像素错乱。
必须同步检查：
-
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在且未被覆盖 - 图片是否用了
srcset+sizes，避免小屏加载大图浪费带宽 - 是否在媒体查询里重置了容器
aspect-ratio（比如桌面端 16/9，移动端改为 4/5） -
object-fit在 iOS Safari 低版本有渲染抖动，可加transform: translateZ(0)强制 GPU 加速
比例不变这件事，从来不是单靠一个 CSS 属性就能兜底的。
