max-width: 100%在移动端常失效，因依赖父容器width计算，而flex、absolute等布局使父宽为auto或过大；需检查Computed width，设min-width: 0、用100vw、配合object-fit与overflow: hidden容器控制。

为什么max-width: 100%在移动端经常失效

不是你漏写了 max-width: 100%，而是它根本没生效——这个声明依赖父容器的 width 计算，而移动端常见布局（display: flex、position: absolute、未设宽的 inline-block）会让父元素的 computed width 变成 auto 或异常大（比如 1200px），导致 100% 参照值远超视口。

用 DevTools 查看图片父级的 Computed → width，如果显示为 auto 或明显大于屏幕宽度，就坐实了这个问题。

• flex 容器里，img 默认 min-width: auto，会拒绝收缩，必须显式加 min-width: 0
• 父容器用了 width: fit-content 或 display: grid 但没配 minmax(0, 1fr)，同样让百分比失去意义
• Bootstrap 项目里漏掉 img-fluid 类，是高频疏忽点

直接锚定视口：用100vw绕过父级宽度链路

当嵌套太深、父级宽度来源混乱时，最省事的办法是跳过它，用视口单位直给约束：

img {
  max-width: 100vw;
  height: auto;
}

但要注意两个坑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 页面有垂直滚动条时，100vw 包含滚动条宽度（通常 16px），可能造成轻微溢出；可改用 100dvw（如支持），或加 box-sizing: border-box; padding-right: 16px 补偿
• 别对所有 img 无差别应用——图文混排中的内联图会强制占满整行，破坏流式布局

要填满又裁剪：object-fit + 容器控制缺一不可

object-fit: cover 不是“开了就灵”，它只在已有盒模型内起作用。单独写这行样式毫无效果。

• 必须先给图片容器（如 <div class="cover-img">）设明确尺寸：<code>width: 100%; height: 200px 或 width: 100vw; height: 50vh
• 再给 img 设 width: 100%; height: 100%; object-fit: cover;
• 必须加 overflow: hidden 到容器上，否则 Safari 等浏览器可能漏出裁剪边缘
• 避免同时写 width: 100% 和 max-width: 100%——Safari 旧版会触发尺寸重算异常

老 iOS 和低端 WebView 的降级方案

iOS ≤ 15.4 不支持 aspect-ratio，某些安卓 WebView 根本不认 object-fit。真机测试发现失效时，得有兜底：

• 用背景图替代：background-image: url(...); background-size: cover; background-position: center;
• 老系统回退 padding-top 百分比技巧：容器设 padding-top: 56.25%（16:9），img 绝对定位并拉满，但要求容器是块级且不能是 flex/grid 直接子项
• 横屏下高宽比突变时，object-fit: contain 可能让图缩成图标大小，需配合媒体查询单独处理

最易被忽略的是：overflow: hidden 必须加在容器上，而不是图片本身；很多人以为加在 img 上就能裁剪，其实它只对块级容器生效。