推荐用 Flex 实现双列图片自适应：主容器设 display: flex + flex-wrap: wrap，子项用 flex: 1 1 calc(50% - 8px)，图片外层包 div、自身设 width: 100% + height: auto，移动端用 @media (max-width: 480px) 回退单列。
用 Flex 实现双列图片自适应（推荐）
直接上手最稳的方案：Flex 布局能自动处理图片宽高差异、响应式断点、对齐和间距，且兼容性覆盖所有现代浏览器（包括 iOS Safari 12+ 和 Android Chrome）。关键不是“让图片拉伸”，而是“让容器按需分配空间，图片自身保持比例”。
常见错误现象：width: 50% 写死导致小屏下图片被压缩变形；float 引发父容器塌陷或换行错乱；没设 max-width: 100% 导致大图撑破容器。
- 主容器加
display: flex+flex-wrap: wrap，子项用flex: 1 1 calc(50% - 8px)（减去 gap 的一半） - 每张图片外层必须包一层
<div> 或 <code><figure></figure>，不能直接对<img alt="HTML两列图片怎么自适应？双排布局设置步骤" >设 flex 属性 - 图片本身加
width: 100%+height: auto，防止拉伸失真 - 移动端断点统一用
@media (max-width: 480px)，里面设flex-direction: column回退单列 - 容器设
display: grid+grid-template-columns: 1fr 1fr+gap: 16px - 避免给子项再设
width，否则触发 shrink，尤其图片内容溢出时表现异常 - 小屏回退时，用同一媒体查询改写为
grid-template-columns: 1fr，比切 flex 更省心 - 若图片高度差异大，加
align-items: start防止底部错位，默认stretch会强行拉高 - HTML 结构必须是两个并列
<div class="col-left"> 和 <code><div class="col-right">，服务端或构建时按索引奇偶分图<li>两列容器用 <code>display: flex+flex-direction: column+gap: 12px控制垂直间距 - 移动端小屏下，用
@media (max-width: 480px)把两列容器设为width: 100%并margin: 0 auto居中 - 别用
columns: 2，它只适用于纯文本流，含图片或标题时会截断，且 Safari 旧版需额外加-webkit-column-break-inside: avoid - 始终用
<img alt="HTML两列图片怎么自适应？双排布局设置步骤" >标签而非背景图，语义清晰、可访问性好、SEO 友好 - 图片外层容器设
max-width: 100%，图片本身设width: 100%+height: auto - 如需统一高度（比如卡片封面），用
object-fit: cover+ 固定容器aspect-ratio: 4/3（注意 Safari 15.4+ 才支持） - 加载前预留占位：给
<img alt="HTML两列图片怎么自适应？双排布局设置步骤" >加loading="lazy"，配合width和height属性防布局抖动
用 Grid 实现严格等宽双列（适合卡片类场景）
当左右两列语义对等（比如「iOS 截图 vs Android 截图」「Before vs After」），Grid 比 Flex 更干净——它不依赖内容高度，列宽由轨道定义，无需手动算百分比。
容易踩的坑：grid-template-columns: 1fr 1fr 看似等于 50%，但实际宽度 = (容器宽 − gap) ÷ 2；若漏写 gap，两列会紧贴；IE11 完全不支持，上线前必须确认 UA 覆盖率。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
纯 CSS 实现“交错瀑布流”图片双列（无 JS）
CSS 原生不支持真瀑布流，所谓“交错”只能靠 DOM 顺序干预：把第 1、3、5… 张图塞进左列容器，第 2、4、6… 塞进右列容器。这是唯一不依赖 JS、兼容 IE11 的伪瀑布方案。
为什么 grid-template-columns: repeat(2, 1fr) 不等于瀑布流？因为它按 DOM 顺序逐行填满，第二张图永远在第一张下方，无法“掉进更短列”。视觉交错必须手动分流。
图片自身怎么保证不糊、不变形？
布局只是容器，图片渲染质量取决于它的尺寸控制逻辑。很多“自适应失败”其实卡在这一层：没告诉浏览器“这张图最大就占满父容器，其余按比例缩放”。
典型翻车现场：用 background-image + cover 做图集，结果每张图裁剪区域不同，视觉混乱；或直接写 width: 100%; height: 200px，强制拉伸失真。
双列图片自适应真正的复杂点不在“怎么排成两列”，而在于图片尺寸不可控时，如何让容器既不溢出、又不拉伸、还能在小屏安全回退。手动分流（伪瀑布）、Flex 自动分配、Grid 语义对齐，三者适用场景完全不同，选错方案比写错代码更难调试。
