图片横排因<img>默认inline且无换行控制；解决需display: block+max-width: 100%+height: auto，并确保父容器未设white-space: nowrap或flex未配flex-direction: column。
图片用 <img> 时，为什么手机上还是横着挤成一排？
因为默认情况下，<img> 是内联元素（inline），在没有明确宽度限制和换行控制时，浏览器会尽量把它们塞在同一行。即使加了 width: 100%，只要父容器够宽、图片没强制换行，它们仍可能并排——尤其当多张图被写在同一行 HTML 中（比如没换行符或被空格/制表符连着）。
解决核心就两点：让每张图独占一行 + 确保它能随屏幕缩放。
- 给
<img>加display: block，消除 inline 默认行为 - 设置
max-width: 100%和height: auto，保证缩放不拉伸 - 避免父容器（如
<div>）设了white-space: nowrap或display: flex却没配flex-direction: column
用 <picture> + srcset 时，怎么确保纵向排列不破版？
<picture> 本身不影响布局，它只是资源选择器；真正决定排列的仍是内部 <img> 的 CSS。但容易踩的坑是：嵌套太深、或忘了给最内层 <img> 写样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不管用不用
<source>，最后那个<img>标签必须带class或直接加 style，例如：<img src="a.jpg" alt="" style="display:block; max-width:100%; height:auto;"> - 不要只给
<picture>设display: block，它不渲染，不起作用 - 如果用了
object-fit（比如裁剪），记得同步设height，否则纵向排列后高度塌陷
用 Flex 布局批量控制多图，flex-direction: column 够吗？
够，但得看父容器是否真“接管”了子元素。常见失效场景是：父容器没设 display: flex，或子元素（<img>）被其他 CSS 覆盖（比如第三方库重置了 display）。
稳妥写法示例：
<div style="display: flex; flex-direction: column; gap: 1rem;"> <img src="1.jpg" alt="" style="width: 100%; height: auto; display: block;"> <img src="2.jpg" alt="" style="width: 100%; height: auto; display: block;"> </div>
-
gap比margin更干净，避免外边距合并问题 - 仍然要给
<img>加display: block，否则 flex 容器里 inline 元素可能底部留空白 - 如果图数量多且需懒加载，
loading="lazy"可以保留，不影响排列
为什么加了 width: 100%，图片在 iPhone 上还是溢出？
大概率是漏了 box-sizing: border-box 或父容器有 padding/margin 未被计算进去，更常见的是没设 html, body { margin: 0; } —— iOS Safari 默认 body 有 8px 外边距，导致 100% 宽度实际超出视口。
必查项：
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">已存在 - 给所有图片父级加
overflow-x: hidden（临时兜底，但应优先修根本） - 用浏览器调试器检查 computed styles，看最终 width 是否真为 100vw，而不是 100% of a padded container
<img> 的 display 行为这三个地方。改完记得在真机 Safari 里点开调试，模拟器有时不反映真实渲染。 
