移动端图片横向溢出的根源是脱离父容器约束，需确保viewport标签正确、img满足max-width:100%+height:auto+display:block三条件，且父容器不塌陷或布局失效。
图片在移动端横向溢出，根本不是“图片太大”，而是它脱离了父容器的约束逻辑——max-width: 100%没生效、viewport标签缺失或错位、或父容器本身已因浮动/绝对定位/未设宽而塌陷。
viewport 标签必须写对且放在 head 最顶部
所有后续响应式样式都依赖它。如果漏掉、写在 body 里、或内容写成 width=375 或加了 user-scalable=no，图片就会强行撑开视口，触发横向滚动条。
-
必须静态写在第一行 - 不能用 JavaScript 动态插入，也不能重复写两遍
- 删掉任何含
maximum-scale、user-scalable的字段，它们会干扰缩放行为
img 元素必须同时满足三个 CSS 条件
只写 max-width: 100% 不够，浏览器仍可能按固有尺寸渲染；只写 height: auto 也不行，它不解决宽度越界问题。
-
max-width: 100%：防止宽度超过父容器 -
height: auto：保持原始宽高比，避免拉伸变形 -
display: block：消除inline行内行为带来的基线间隙和换行不可控问题
三者缺一不可，建议统一写在全局样式里：
img { max-width: 100%; height: auto; display: block; }
父容器不能是“隐形失效”的 flex 或浮动布局
常见翻车现场：给 .row 加了 display: flex，但没设 flex-direction: column，导致图片和文字被强制水平排列，小屏下直接溢出；或用了 float: left 却没清除浮动，父容器高度塌陷，max-width 失去参照。
- 若用 flex 布局，确保父容器有明确宽度（如
width: 100%），并设flex-direction: column让图片垂直堆叠 - 若用浮动，必须配
overflow: hidden或伪元素清除浮动，否则父容器无法包裹图片 - 避免对图片父容器设
white-space: nowrap或word-break: keep-all，它们会抑制换行逻辑
别用 overflow-x: hidden 掩盖问题
给 body 或父 div 加 overflow-x: hidden 能藏住滚动条，但图片实际仍超出视口——用户截屏、打印、或用辅助技术时会暴露内容丢失。这不是修复，是遮羞。
真正要检查的是：图片是否还在文档流里？父容器 offsetWidth 是否可读？有没有未重置的 margin/padding 导致计算偏差？这些细节，比加一句 hidden 更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
