窄屏下图片变形或溢出的根本原因是父容器无明确宽度，导致max-width: 100%失去参照；必须配合height: auto、父容器约束（如max-width: 100%）、flex-shrink: 0（Flex中）及srcset多倍图支持。
只写 max-width: 100% 为什么窄屏下图片还是变形或溢出
因为浏览器计算 max-width: 100% 时，需要一个有明确宽度的父容器作为参照。如果图片直接放在没设宽的 <div> 里，而这个 <div> 又是 display: block（默认行为），它会撑满视口——结果就是一张 400×300 的小图被拉伸到 100vw 宽，立刻模糊、失真。
常见错误现象：窄屏下图片被压扁、上下留白异常、卡片内图片突然变窄变高、Flex 容器中图片高度塌陷。
- 必须配
height: auto，否则浏览器不会按原图比例推算高度 - 检查父容器是否隐式为
inline或未设width/max-width，比如<span>包裹<img> - 在 Flex 布局中，
<img>默认会收缩（flex-shrink: 1），需显式加flex-shrink: 0 - Safari 移动端老页面可能忽略
max-width，可补一句width: 100%
object-fit 不是窄屏缩放方案，别乱用
object-fit 只在图片已有固定尺寸容器（如 width: 200px; height: 150px）时才生效。它不控制“图片随屏幕变小”，只决定“这张图怎么塞进那个框里”。窄屏下若没提前设好容器宽高，object-fit: cover 或 contain 直接不工作，甚至让小图缩成针尖大。
使用场景很窄：头像、轮播封面、卡片固定尺寸区域。普通正文图、文章配图、响应式 banner 都不该用它来替代 max-width: 100%; height: auto。
立即学习“前端免费学习笔记（深入）”；
- 误用表现：
<img style="object-fit: contain">却没写width和height，结果图片原样显示、不缩放 - IE 完全不支持
object-fit，窄屏兼容性更差 - 想用
object-fit，必须先确保父容器有确定宽高，例如.card-img { width: 100%; height: 200px; }
真正适配窄屏的最小可靠组合
最简、兼容性最好、无需 JS 的方案就是两行 CSS：
img {
max-width: 100%;
height: auto;
}
但仅这样还不够，得配合父级约束：
- 给图片直接父容器加
max-width: 100%或具体值（如max-width: 800px） - 若用 Flex 布局，确保该父容器有
flex: 1或width: 100%，且子项（即<img>）加flex-shrink: 0 - 移除所有可能覆盖
height: auto的样式，比如height: 100%、min-height、行内height属性 - 图片是内联元素，顺手加
display: block消除底部空白（尤其窄屏下易露白边）
高清屏窄屏下依然模糊？问题不在 CSS
窄屏下图片发虚，大概率不是 max-width 写错了，而是图源没跟上设备像素比。CSS 缩放不生成新像素，一张 600px 宽的图在 iPhone 15 Pro（3x 屏）上缩到 300px 显示，物理像素只有 600 个，必然糊。
必须用 srcset 提供多倍图：
<img src="photo-600.jpg" srcset="photo-600.jpg 1x, photo-1200.jpg 2x, photo-1800.jpg 3x" sizes="(max-width: 600px) 100vw, 50vw" >
- 漏掉
sizes，浏览器基本只用第一张图，窄屏也加载 1800px 大图 -
sizes值要真实反映窄屏下图片占用的视口宽度，比如(max-width: 480px) 100vw - 现代项目建议搭配 WebP/AVIF 格式 + CDN 缓存，否则再好的 CSS 也救不了带宽和解码压力
max-width: 100% 就从万能钥匙变成摆设。 
