移动端图片横向溢出的根源是脱离父容器约束，需确保viewport标签正确、img满足max-width:100%+height:auto+display:block三条件，且父容器不塌陷或布局失效。
图片在移动端横向溢出，根本不是“图片太大”，而是它脱离了父容器的约束逻辑——max-width: 100%没生效、viewport标签缺失或错位、或父容器本身已因浮动/绝对定位/未设宽而塌陷。
viewport 标签必须写对且放在 head 最顶部
所有后续响应式样式都依赖它。如果漏掉、写在 body 里、或内容写成 width=375 或加了 user-scalable=no，图片就会强行撑开视口，触发横向滚动条。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须静态写在第一行 - 不能用 JavaScript 动态插入，也不能重复写两遍
- 删掉任何含
maximum-scale、user-scalable的字段，它们会干扰缩放行为
img 元素必须同时满足三个 CSS 条件
只写 max-width: 100% 不够，浏览器仍可能按固有尺寸渲染；只写 height: auto 也不行，它不解决宽度越界问题。
-
max-width: 100%：防止宽度超过父容器 -
height: auto：保持原始宽高比，避免拉伸变形 -
display: block：消除<img alt="HTML中怎么控制响应式图片在移动端不横向溢出" >默认的inline行内行为带来的基线间隙和换行不可控问题
三者缺一不可，建议统一写在全局样式里：
img { max-width: 100%; height: auto; display: block; }
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
父容器不能是“隐形失效”的 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 更关键。
