真正溢出的根源在父容器未约束、布局模式不匹配或缺失关键声明；需设父容器max-width:100%、box-sizing:border-box，图片加width:100%;max-width:100%;height:auto，并按场景选flex居中或text-align+display:block方案。
直接给 img 设 max-width: 100% 和 height: auto 只能解决缩放，不能防溢出——真正溢出的根源，往往在父容器没约束、布局模式不匹配，或浏览器兼容性漏掉关键声明。
父容器没设宽度限制，图片就敢撑破页面
很多溢出不是图片写错了，而是它的父 <div> 没设 <code>width 或 max-width。浏览器默认让图片按原始尺寸渲染，哪怕超视口。
- 必须给父容器加
max-width: 100%（比width: 100%更安全，防止小屏被强制拉宽） - 大屏防过宽可加
max-width: 1200px（按设计稿调） - 务必加
box-sizing: border-box，否则padding或border会让实际宽度超标
图片自身缩放声明不完整，旧版 Safari 就会失效
部分 iOS 15 之前版本对纯 max-width: 100% 响应不敏感，图片可能保持原始宽度。
- 最简兼容方案：补上
width: 100%（注意不是width: 100vw，会破坏语义） - 完整声明建议：
width: 100%; max-width: 100%; height: auto; - 如果图片是内容核心，别漏
alt属性，否则无障碍阅读器无法识别
图片居中和缩放是两件事，混用就失效
text-align: center 只对行内级子元素生效，margin: 0 auto 只对块级元素有效——而 <img alt="HTML怎么解决图片自适应时的边界溢出问题" > 默认是行内替换元素，单独用任一方案都可能失败。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 最稳做法：父容器设
display: flex; justify-content: center; align-items: center;，再配height: auto或固定高 - 若父容器高度不确定（如文字流式布局），改用
text-align: center+img { display: block; margin: 0 auto; } - 检查三个硬条件：父容器是否真设了
display: flex；是否高度塌陷（比如没内容撑开、也没设min-height）；<img alt="HTML怎么解决图片自适应时的边界溢出问题" >是否被position: absolute或float脱离文档流
真正容易被忽略的是：缩放靠 max-width 和 height，居中靠父容器的布局模式（flex / text-align / margin），少一个环节，就会在某类设备或内容长度变化时突然失效。
