HTML中如何制作图片画廊展示页面-html教程-PHP中文网

CSS Grid 可实现响应式图片画廊，核心是 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 aspect-ratio 和 object-fit 控制图片不变形，交互需少量 JS 处理过滤与 lightbox。

html中如何制作图片画廊展示页面

直接用 CSS Grid + HTML 就能做出响应式、不塌陷、不撕裂的图片画廊，不需要 JS 也能跑通基础布局；但加交互（如点击放大、分类过滤）就得补少量脚本。

用 `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` 实现自适应列数

这是现代画廊布局最稳的写法，比写死 repeat(3, 1fr) 或靠媒体查询更可靠：

minmax(280px, 1fr) 表示每列最小 280px，超出就自动均分剩余空间；小屏下会自然退化为单列
auto-fill 让浏览器尽可能多塞列，哪怕最后一列是空的，也保持网格结构完整（auto-fit 会把空列收缩掉，有时导致错位）
必须配 grid-gap 控制间距，别用 margin —— 否则在 flex 或 grid 中容易触发外边距合并或塌陷
如果图片高度差异大，加 align-items: start 防止底部错行

图片容器必须设 `aspect-ratio` 或用 `object-fit` 防变形

直接给设固定宽高是最大陷阱，会导致拉伸或压缩。正确做法分两层控制：

外层容器（如或 ）设 aspect-ratio: 4/3 + width: 100%，再让填满：width: 100%; height: 100%; object-fit: cover;
不支持 aspect-ratio 的旧浏览器（如 Safari 15.4 之前），可用 height: 0; padding-bottom: 75% 占位（4:3 → 75%）


千万别只写 img { width: 100%; } 而不控高——图片加载前高度为 0，Grid 会塌成一条线
加分类过滤时，data-category 和 .is-hidden 类要配合用
原生 JS 过滤不是简单地 display: none，否则会破坏懒加载和滚动锚点：

											
												
												
													Wechat Article Html
													将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
												
												下载
												
											
										

每个图片项加 data-category="portrait"，按钮加对应 data-filter="portrait"（大小写敏感）
CSS 定义 .is-hidden { display: none; }，JS 只操作 classList.add/remove，不碰 style.display

“全部”按钮建议用 data-filter="*"，JS 里判断到这个值就跳过过滤逻辑
每次过滤前先执行 document.querySelectorAll('.gallery-item').forEach(i => i.classList.remove('is-hidden')) 清场，避免残留

lightbox 点击放大时，dataset.full 是关键路径载体
缩略图和高清图分离是轻量级方案的核心，不用插件也能做：

缩略图写成 ，JS 读 item.dataset.full 赋给弹窗里的 

关闭逻辑要区分点击区域：用 lightbox.addEventListener('click', e => { if (e.target === lightbox) lightbox.style.display = 'none'; })，避免点大图时误关
别在 DOMContentLoaded 就初始化 lightbox 监听器——等 img 加载完再绑，否则 dataset.full 可能读不到（尤其 SSR 场景）
移动端需额外加 touchend 事件，不然点不响应

真正难的不是写出来，而是图片加载时机、懒加载占位、不同设备下 object-fit 行为差异、以及 grid 在 Safari 旧版里的 fallback 处理——这些细节不试到真机根本看不出问题。