点击图片可全屏放大：HTML提供img和隐藏overlay结构，CSS用fixed定位+flex居中+max-width/max-height等比缩放，JS绑定click事件切换display并支持Esc关闭。
用纯 HTML 实现点击图片全屏放大，需要结合 HTML、CSS 和少量 JavaScript。HTML 本身不支持交互行为（如点击放大），必须借助 JS 控制显示逻辑，但结构和样式可完全用原生技术完成，无需第三方库。
基础 HTML 结构：准备图片和全屏容器
在页面中放一张普通图片，并添加一个隐藏的全屏查看器（overlay）作为放大容器：
- 图片用
<img>标签，加class="zoomable"便于选择 - 全屏容器是固定定位的
<div class="fullscreen-overlay">，初始设为display: none - 容器内嵌一个
<img>用于显示放大的原图，保持原始尺寸或按视口自适应
CSS 样式：让全屏层覆盖整个屏幕并居中显示图片
关键在于遮罩层铺满屏幕、背景半透明，再把大图居中、等比缩放、支持滚动查看超大图：
-
.fullscreen-overlay：设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 9999; -
.fullscreen-overlay img：设max-width: 90vw; max-height: 90vh; object-fit: contain; border: 4px solid white; - 点击后加
display: flex激活遮罩层
JavaScript 交互：监听点击，传图地址，显示遮罩
给每张可放大的图片绑定点击事件，把它的 src 赋给全屏容器里的 <img>，再显示遮罩：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.zoomable').forEach(img => {
img.addEventListener('click', () => {
const overlay = document.querySelector('.fullscreen-overlay');
const fullImg = overlay.querySelector('img');
fullImg.src = img.src;
overlay.style.display = 'flex';
});
});
// 点击遮罩或按 Esc 键关闭
document.querySelector('.fullscreen-overlay').addEventListener('click', e => {
if (e.target === e.currentTarget) {
e.currentTarget.style.display = 'none';
}
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
document.querySelector('.fullscreen-overlay').style.display = 'none';
}
});
增强体验小技巧（可选）
提升实用性与友好度：
- 给全屏图片加
loading="lazy"避免预加载大图 - 用
cursor: zoom-in提示图片可点击 - 禁用遮罩层内图片的拖拽：
onmousedown="return false"或 CSS-webkit-user-drag: none - 移动端适配：加
touch-action: pan-y防止滑动冲突
