图片列表应使用<div>或<section>包裹<img>，配合CSS Grid实现等宽响应式布局，确保无障碍（alt）、加载降级（onerror）和移动端适配（viewport）。
图片列表用 <img> 配合 <div> 或 <section> 最稳妥
不用 <ul> 套 <li> 强行语义化，除非你真需要列表语义（比如带序号、可键盘导航）。多数图集只是视觉排列，<div> 更轻量、更可控。
常见错误是直接把一堆 <img> 并列写，结果默认 inline 行内排列，受空格/换行影响错位，还不好加间距。
- 给外层容器设
display: flex或display: grid，主动控制布局 - 每张图用
<img>，别用background-image——后者无法被屏幕阅读器识别，也难统一控制尺寸 - 必须写
alt属性，哪怕只是空字符串alt=""，否则无障碍检测会报错
用 CSS Grid 实现等宽响应式图列最省事
Grid 天然适合行列对齐，比 Flex 在多行场景下更稳定，尤其当图片数量不固定时。
<div class="image-grid"> <img src="1.jpg" alt="示例图一"> <img src="2.jpg" alt="示例图二"> <img src="3.jpg" alt="示例图三"> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.image-grid img {
width: 100%;
height: auto;
display: block;
}
-
minmax(200px, 1fr)表示每列最小 200px，剩余空间均分；auto-fill让浏览器尽可能多铺列 -
gap控制图间距，比用margin更干净，不会触发外边距合并 -
display: block是关键——去掉<img>默认的基线对齐，避免底部多出空白
图片加载慢或失败时要有降级处理
用户网络差、路径写错、图片删了，都会让 <img> 显示为断裂图标或留白。不能只靠 CSS 隐藏。
- 用
onerror内联事件 fallback 到占位图：<img src="x.jpg" onerror="this.src='placeholder.svg'" alt="..."> - 或者更稳妥：用
<picture>+<source>提供 WebP 和 JPEG 双格式，兼顾性能与兼容性 - 避免在
src里写相对路径如./images/1.jpg却忘了建对应文件夹——浏览器控制台会明确报404 Not Found
移动端缩放和点击放大容易被忽略
小屏上图片挤在一起，手指点不准；用户想看大图，但没提供交互入口，体验就断了。
- 加
viewportmeta 标签确保页面不被强制缩放：<meta name="viewport" content="width=device-width, initial-scale=1"> - 如果要做点击放大，别用新窗口
target="_blank"——移动端体验割裂；推荐用轻量 JS 监听click，动态插入遮罩层和大图 - 注意
max-width: 100%必须作用于<img>，否则在窄屏上会横向溢出滚动条
真正麻烦的不是怎么排成一行，而是图片尺寸不一、加载状态不可控、移动端手势冲突这些细节。把 alt、onerror、viewport 这三处补全，基础体验就算立住了。
