点击图片放大需HTML+CSS+JS协同实现：用modal结构（遮罩层+大图）、JavaScript绑定click/keydown事件控制显隐，配合max-width/max-height与object-fit保证安全缩放和居中，移动端建议依赖浏览器原生手势而非自实现。
点击图片触发放大效果，本质是控制显示层级和尺寸
直接用纯 HTML 无法实现点击放大——<img> 标签本身没有交互逻辑。必须配合 CSS 控制视觉变化，并用 JavaScript 绑定点击事件。常见做法是把原图放在一个可点击容器里，点击后在页面顶层插入一个遮罩层（overlay）+ 放大后的图片副本。
用 click 事件监听 + modal 结构是最稳妥的方案
别依赖 CSS 的 :hover 或 transform: scale() 做“点击放大”，那只是视觉缩放，不解决查看细节、居中、背景变暗等真实需求。正确结构包含三部分：<img>（缩略图）、<div class="modal">（遮罩层）、<img src="..." class="modal-img">（大图）。关键点：
-
modal初始设为display: none或visibility: hidden，避免影响初始渲染 - 点击时读取原图的
src、alt，赋给modal-img，再设display: flex - 用
event.preventDefault()防止图片被拖拽或右键另存干扰流程 - 按
Esc键或点击遮罩层空白处关闭，需绑定keydown和click两个事件
max-width: 90vw 和 max-height: 90vh 是安全缩放的关键限制
直接设 width: 100% 容易撑爆视口，尤其竖图会拉伸变形。正确做法是让大图在保持宽高比前提下，最大不超过视口的 90%：
`.modal-img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
margin: auto;
}`
注意：object-fit: contain 确保完整显示不裁剪；margin: auto 配合 display: block 实现水平垂直居中；若用 flex 布局，则父容器需设 align-items: center; justify-content: center。
立即学习“前端免费学习笔记（深入）”；
移动端双击放大、手势缩放需要额外处理，原生不支持
桌面端点击一次弹出大图即可，但手机用户习惯双击或 pinch 手势。纯 HTML/CSS/JS 无法直接捕获 pinch 手势，touchstart/touchmove 需自己算距离差，复杂且易误触。务实做法：
- 对移动端，只保留单击弹出全屏图，然后允许用户用系统自带的手势缩放（现代浏览器对
<img>在modal中默认支持） - 确保
meta viewport设置正确：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免在
modal上加user-scalable=no，否则手势失效
真正要支持精细手势控制，得引入 panzoom 或 photo-swipe 这类库，不是几行代码能搞定的事。
