图片导致移动端布局偏移的根源是浏览器默认行为叠加：img 作为内联元素自带 baseline 留白，加上安卓 WebView 对 max-width 解析不准及 iOS Safari 键盘弹出时视口冻结，引发容器撑开又缩回的跳动；解决需三步：1. 给 img 加 vertical-align: top 或 display: block 消除留白；2. 用 aspect-ratio + object-fit 控制比例与裁剪；3. 在 flex 容器中设 flex-shrink: 0 防压缩变形。
为什么图片会导致移动端布局偏移
不是图片本身“动了”，而是它触发了浏览器默认行为叠加：img 是内联元素，默认带底线（baseline），父容器若未设 font-size: 0 或 vertical-align: top，就会在图片下方留白；加上部分安卓 WebView 对 max-width: 100% 解析不准、iOS Safari 在键盘弹出时冻结视口高度，图片撑开容器后又缩回，就会引发肉眼可见的“跳动”。
给 img 加 vertical-align 和 display:block
这是最轻量、兼容性最好的起步动作，能立刻消除 baseline 留白导致的错位：
-
img默认是display: inline，必须显式写成display: block或vertical-align: top/middle/bottom - 如果图片在文字行内，用
vertical-align: top更安全；若独立成块，直接display: block即可 - 别依赖父容器
line-height: 0或font-size: 0——某些 Android 低版本 WebView 会忽略它们
.card img {
display: block;
max-width: 100%;
height: auto;
}
用 aspect-ratio + object-fit 控制图片拉伸与溢出
当图片尺寸不确定（比如 CMS 后台上传任意比例图），仅靠 max-width: 100% 无法阻止父容器被撑宽或高度突变，进而引发 flex 容器收缩或 margin 合并错位：
-
aspect-ratio: 4/3可让容器保持比例，避免内容区随图片高度跳变 -
object-fit: cover比contain更适合卡片类场景，但需配合overflow: hidden防边缘溢出 - iOS Safari 15.4+ 支持
aspect-ratio，旧版可用 JS 补丁或伪元素占位，但真机测试时优先验证 computed 样式是否生效
.hero-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
overflow: hidden;
}
避免在 flex 容器里让 img 自动 shrink
Flex 子项默认 flex-shrink: 1，一旦父容器空间不足（比如横屏切竖屏、键盘弹出），img 会被压缩变形甚至模糊——这不是 bug，但视觉上就是“偏移”：
立即学习“前端免费学习笔记（深入）”；
- 对关键图片加
flex-shrink: 0，确保它不参与压缩 - 若需响应式缩放，改用
flex: 0 0 auto（即不增长、不缩小、按内容宽） - 慎用
flex: 1套在图片外层——它会让图片容器强行拉伸，反而放大错位风险
真机调试时最容易忽略的是：iOS Safari 的 flex-basis 解析差异。同一段 CSS，在 iPhone 上可能把 flex-basis: 200px 当作 auto 处理，导致图片宽度失控。务必在 Safari 开发者工具里看 computed 的 flex-basis 值，而不是只信源码。
