用 CSS Grid 实现相册布局需设外层 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，每张图包 ， 加 width: 100% 和 height: auto；放大需 JS 动态插入 modal 并监听 Esc 关闭；onerror 可兜底隐藏或替换占位图；滑动翻页优先用 scroll-snap-type + flex。
用 <img alt="如何用html制作一个电子相册" > 和 CSS Grid 实现基础相册布局
纯 HTML 做电子相册，核心不是“怎么炫”，而是“怎么让图片不炸开、不拉伸、加载可控”。<img alt="如何用html制作一个电子相册" > 标签本身不支持相册逻辑，得靠 CSS 控制排列和响应。Grid 是目前最稳的方案，比 float 或 inline-block 少踩 80% 的坑。
常见错误是直接堆一堆 <img src="..." alt="如何用html制作一个电子相册" >，结果在手机上挤成一条细线，或某张图宽高比崩坏撑爆容器。
- 给外层容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))自适应列数 - 每张图包一层
<figure></figure>，避免<img alt="如何用html制作一个电子相册" >直接参与布局计算 -
<img alt="如何用html制作一个电子相册" >必须加width: 100%和height: auto，否则高宽比失控 - 别依赖
srcset或sizes做响应式——没 JS 配合时，浏览器可能加载超大图再缩放，白耗流量
点击放大需要 JavaScript，但可以极简实现
HTML 本身没有“模态框”或“全屏查看”能力。想点图放大，必须加少量 JS，但不用框架、不引库也能搞定。
容易被忽略的是：放大后按 Esc 或点背景关闭，这个交互如果没写，用户会觉得“卡死了”。还有图片原始尺寸未知时，盲目设 max-width: 90vw 可能导致小图被拉伸。
立即学习“前端免费学习笔记（深入）”；
- 监听所有
<img alt="如何用html制作一个电子相册" >的click事件，动态插入一个<div class="modal"> 到 <code>document.body - 新
<img alt="如何用html制作一个电子相册" >的src复制原图地址，但加loading="eager"防止懒加载干扰 - 关闭逻辑只绑定一次：用
document.addEventListener('keydown', e => e.key === 'Escape' && closeModal()) - 别用
transform: scale()放大——它会模糊；优先用width/height配合object-fit: contain - 写成
<img src="photo1.jpg" onerror="this.style.display='none'" alt="如何用html制作一个电子相册" >最简兜底 - 更稳妥是替换为占位图：
onerror="this.src='placeholder.svg'" - 别在
onerror里调用未定义函数，否则报错中断后续图片加载 - Webpack/Vite 等构建工具会重写
src路径，此时相对路径易失效，建议统一用/assets/xxx.jpg这种根路径 - 父容器设
display: flex、overflow-x: scroll、scroll-snap-type: x mandatory - 每个图容器设
flex: 0 0 100%和scroll-snap-align: start - 禁用橡皮筋效果：
overscroll-behavior-x: contain - 别加
touch-action: pan-y——它会阻止横向滚动，反而让滑不动
图片路径出错时，onerror 比 CSS fallback 更可靠
本地测试好好的，一丢到服务器就满屏叉，八成是路径错了。<img alt="如何用html制作一个电子相册" > 的 onerror 属性是唯一能在 HTML 层捕获加载失败的机制，CSS 的 ::after 或背景图 fallback 都不生效。
注意：这个属性只对网络请求失败触发，对 CORS 错误、403、404 有效，但对本地文件协议（file://）下跨目录访问失败不一定响应。
移动端滑动翻页？别碰 touchstart 手写逻辑
真要加左右滑动切图，手写 touch 事件极易出 bug：手指斜着划、快速连划、和浏览器默认滚动冲突……这些都会导致“划一下跳三张”或“卡死不动”。
现阶段最省心的解法是用浏览器原生支持的 scroll-snap-type + flex 容器，零 JS 实现物理感翻页，且兼容 iOS Safari 14+ 和 Chrome 75+。
复杂点在于：如果图数量多，一次性加载全部会拖慢首屏。这时候就得拆成“可见区域预加载 + IntersectionObserver 监听滚动”，但那是另一个问题了。
