不能，纯HTML+CSS无法实现点击缩略图弹出遮罩层显示原图，因缺乏事件响应、动态换图、Esc关闭等交互能力，必须依赖JavaScript完成绑定点击、注入图片、控制显隐及手势支持。
点击缩略图弹出遮罩层显示原图，用纯 HTML + CSS 能实现吗？
不能。纯 HTML + CSS 无法响应点击事件、切换图片、控制显示隐藏，必须引入 JavaScript。常见误区是以为 dialog 元素或 :target 伪类能搞定交互逻辑，但它们不支持动态换图、键盘关闭（Esc）、图片加载状态反馈等关键体验。
真正可用的最小可行方案是：HTML 结构预留缩略图与大图映射关系，CSS 控制遮罩样式，JS 绑定点击并注入对应图片。
-
<img>缩略图需带data-large-src属性，存放大图 URL - 遮罩层（
.lightbox）初始设为display: none或visibility: hidden，避免 FOUC - 不要用
position: fixed套整个body，否则 iOS Safari 滚动时遮罩错位
lightbox 遮罩层里图片怎么居中且自适应宽高？
核心是让图片按比例缩放，不溢出视口，同时保持居中。不能只靠 max-width: 100%，否则高度失控；也不能用 object-fit: contain 单独处理，因为容器尺寸未约束。
推荐结构：<div class="lightbox"><div class="lightbox-content"><img></div></div>，然后：
立即学习“前端免费学习笔记（深入）”；
-
.lightbox设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8) -
.lightbox-content设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) -
img设max-width: 90vw; max-height: 80vh; height: auto; width: auto，再加display: block; margin: 0 auto
这样图片宽度优先受限于视口宽，高度自动等比缩放；若图片本身瘦高，则高度成为瓶颈，宽度自动收缩 —— 实测比单纯 width: 100% 稳定得多。
如何支持 Esc 关闭、点击遮罩关闭、左右方向键翻页？
这些交互必须由 JS 统一监听，且要注意事件冒泡和焦点陷阱。例如点击图片本身不应关闭灯箱，但点击外层遮罩或按 Esc 应该关闭。
- 监听
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox() }) - 给
.lightbox绑click，但判断e.target === e.currentTarget才关闭（排除点击内部img） - 翻页需维护当前索引，从所有缩略图集合中找下一个
data-large-src，预加载下一张防止白屏 - 别忘了在打开时
document.body.style.overflow = 'hidden'，关闭时还原，否则页面会意外滚动
移动端双指缩放和拖拽为什么默认失效？
因为遮罩层通常用了 pointer-events: none 或 touch-action: none 来阻止底层滚动，但这也禁掉了图片本身的缩放手势。修复关键点就两个：
- 给
img单独设touch-action: pinch-zoom（iOS/Android Chrome 都支持） - 如果要支持拖拽平移，得自己实现
touchstart/touchmove逻辑，监听touches[0]位移并更新transform: translate()，且要限制边界，否则图片拖出视野就回不来 - 慎用
user-scalable=no在 meta 标签里，它会直接禁掉所有页面缩放，包括灯箱内图片
真要完整支持手势，建议直接用 photo-swipe 这类库，自己手写容易漏掉 touchcancel、多点触控冲突、惯性滚动等细节。
