图片在手机端不换行，本质是img默认为内联元素且有固有宽高，父容器缺乏响应式约束；需用max-width:100%+height:auto+display:block或flex-wrap:wrap配合flex布局实现自动换行。
图片在手机端不换行，本质是默认 <img> 是内联元素但有固有宽高，且父容器未做响应式约束——不是“加个换行符”能解决的，得从盒模型和响应式逻辑入手。
为什么 <br> 或空格不管用
很多人试过在 <img> 后加 <br> 或多个空格，发现手机上依然挤成一排甚至溢出。这是因为：
-
<img>默认是display: inline，但它的换行行为受父容器white-space和宽度限制共同影响，不是纯文本流 - 移动端视口窄，若图片
width写死（如width: 300px），它会强行撑开父容器，触发横向滚动而非换行 -
<br>只强制文本级换行，对脱离文档流或宽度超限的图片无效
真正起效的 CSS 响应式写法
让图片“自动换行”，其实是让它能随容器缩放、并在必要时独占一行。核心就两条规则：
- 给
<img>加max-width: 100%+height: auto，防止溢出 - 确保父容器有明确宽度（比如
width: 100%或使用flex/grid布局），并设置word-break: break-word或更稳妥的display: block让图片脱离内联流
最简可靠写法：
立即学习“前端免费学习笔记（深入）”；
<style>
.responsive-img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<p><img src="a.jpg" class="responsive-img">
<img src="b.jpg" class="responsive-img">这样每张图都会独占一行，且在小屏下自动等比缩放。
多图横排 → 自动折行的 flex 方案
如果想在宽屏显示 3 列、窄屏变成 1 列（即“自动换行”成新行），不能靠 <br>，得用 flex-wrap：
- 把所有
<img>包进一个容器，设为display: flex - 加
flex-wrap: wrap允许折行 - 每张图设
flex: 1 1 calc(33.333% - 8px)（带间隙）或直接用width配合min-width
示例：
<div style="display: flex; flex-wrap: wrap; gap: 8px;"> <img src="a.jpg" style="flex: 1 1 300px; max-width: 100%; height: auto;"> <img src="b.jpg" style="flex: 1 1 300px; max-width: 100%; height: auto;"> <img src="c.jpg" style="flex: 1 1 300px; max-width: 100%; height: auto;"> </div>
注意：iOS Safari 旧版需加 -webkit-flex 前缀；gap 在 Android 4.4– 要用 margin 模拟。
避免踩坑的三个细节
实际项目中，以下三点最容易被忽略，导致“写了 responsive 却还是不换行”：
- 父容器没设
width或用了min-width: 100vw，会锁死最小宽度，图片缩放失效 -
<img>上写了width或height行内样式（如width="600"），会覆盖max-width: 100% - 图片加载前高度塌陷，造成布局跳动，建议统一加
aspect-ratio或用padding-top占位（如padding-top: 56.25%对应 16:9）
响应式图片换行，关键不在“怎么打断”，而在“怎么交还控制权给容器”——一旦父容器宽度可变、图片尺寸可缩、布局模式支持折行，换行就是自然结果。
