如何用html制作一个电子相册

用 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

图片路径出错时，onerror 比 CSS fallback 更可靠

本地测试好好的，一丢到服务器就满屏叉，八成是路径错了。<img alt="如何用html制作一个电子相册" > 的 onerror 属性是唯一能在 HTML 层捕获加载失败的机制，CSS 的 ::after 或背景图 fallback 都不生效。

注意：这个属性只对网络请求失败触发，对 CORS 错误、403、404 有效，但对本地文件协议（file://）下跨目录访问失败不一定响应。

• 写成 <img src="photo1.jpg" onerror="this.style.display='none'" alt="如何用html制作一个电子相册" > 最简兜底
• 更稳妥是替换为占位图：onerror="this.src='placeholder.svg'"
• 别在 onerror 里调用未定义函数，否则报错中断后续图片加载
• webpack/Vite 等构建工具会重写 src 路径，此时相对路径易失效，建议统一用 /assets/xxx.jpg 这种根路径

移动端滑动翻页？别碰 touchstart 手写逻辑

真要加左右滑动切图，手写 touch 事件极易出 bug：手指斜着划、快速连划、和浏览器默认滚动冲突……这些都会导致“划一下跳三张”或“卡死不动”。

现阶段最省心的解法是用浏览器原生支持的 scroll-snap-type + flex 容器，零 JS 实现物理感翻页，且兼容 ios safari 14+ 和 chrome 75+。

• 父容器设 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——它会阻止横向滚动，反而让滑不动

复杂点在于：如果图数量多，一次性加载全部会拖慢首屏。这时候就得拆成“可见区域预加载 + IntersectionObserver 监听滚动”，但那是另一个问题了。