图片在移动端撑破布局的解决方法是设置 max-width: 100% 和 height: auto，确保图片随容器缩放且保持宽高比；避免使用 width: 100% 或 height: 100% 导致变形或模糊。
图片在移动端撑破布局，核心是让它随容器宽度自动缩放，同时保持宽高比。关键就两条：给图片设 max-width: 100% 和 height: auto。
为什么 max-width: 100% 能解决问题
它让图片最大宽度不超过其父容器，超出部分自动缩小；而 height: auto 保证高度按原始比例等比缩放，不会被拉伸或压扁。
常见错误写法：
❌ width: 100% —— 强制铺满，破坏比例，小图会被拉大模糊
❌ height: 100% —— 高度固定，宽高比丢失，图片变形
基础安全写法（推荐直接用）
给所有响应式图片统一加这段 CSS：
img { max-width: 100%; height: auto; }- 如果图片是背景图，改用
background-size: contain或cover，并确保容器有明确宽高 - 避免对图片父元素设置
white-space: nowrap或overflow: hidden以外的限制（可能干扰换行与裁剪）
遇到内联图片或富文本内容怎么办
CMS 或编辑器插入的图片往往没 class，可用属性选择器兜底：
img[src] { max-width: 100%; height: auto; }- 若需兼容老版 iOS Safari，可加
vertical-align: middle;防止底部多出空白 - 图文混排时，给图片加
display: block;消除行内元素默认的基线对齐留白
需要精确控制最大尺寸？加 media query 限定
比如希望图片在屏幕大于 768px 时最多显示 600px 宽，小屏再压缩：
@media (min-width: 768px) { img { max-width: 600px; } }- 注意：这条要写在通用规则之后，否则会被覆盖
- 更稳妥的做法是用
clamp()（现代浏览器支持）：max-width: clamp(100%, 600px, 100vw);—— 小屏 100%，中屏上限 600px，大屏不超视口宽
基本上就这些。不复杂但容易忽略——多数“图片撑破”问题，加一行 max-width: 100% 就能解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
