最轻量兼容的做法是用<img>+<dialog>+showModal()实现点击放大，需正确处理遮罩、焦点、关闭逻辑及降级方案。
点击图片直接触发浏览器原生放大功能
现代浏览器（Chrome 90+、Firefox 95+、Safari 15.4+）已原生支持 loading="lazy" 和 intrinsicsize，但真正实现“点击放大”仍需借助 <dialog> 或 object-fit 配合 JS 控制。最轻量、兼容性最好的做法是用 <img> + <dialog> + 原生 showModal()，不依赖任何第三方库。
常见错误是直接给 <img> 加 onclick="window.open(this.src)"——这会跳转新页或弹窗拦截，体验差且移动端失效。
- 必须用
<dialog>包裹<img>，并设置modal属性才能获得系统级遮罩和焦点锁定 -
<dialog>默认不可见，需显式调用showModal()，不能只靠 CSSdisplay: none切换 - 放大图建议使用
max-width: 90vw和max-height: 90vh，避免超出视口导致滚动失焦
用 JavaScript 绑定点击事件并控制 dialog 显示
关键不是“怎么放大”，而是“怎么让 dialog 正确显示并响应 Esc/点击遮罩关闭”。<dialog> 的 close() 方法必须由用户主动触发，不能监听 click 直接关——否则点图片内部也会关闭。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" alt="示例图" class="zoomable">
<dialog id="zoomDialog">
<img src="" alt="放大图" id="zoomImg">
</dialog>
<script>
const img = document.querySelector('.zoomable');
const dialog = document.getElementById('zoomDialog');
const zoomImg = document.getElementById('zoomImg');
img.addEventListener('click', () => {
zoomImg.src = img.src;
dialog.showModal(); // 注意：不是 .show()
});
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});
</script>
-
showModal()会禁用背景交互，show()不会，别写错 - 监听
dialog自身的click事件来关闭，而不是zoomImg或document - 移动端需额外加
touchstart事件，iOS Safari 对click有 300ms 延迟
CSS 样式必须处理的三个细节
没样式时 <dialog> 会以极小尺寸居中，且无背景遮罩，用户根本看不到放大效果。
- 给
<dialog>设background: rgba(0,0,0,0.9)和border: none，否则默认有白边和阴影 -
#zoomImg必须设max-width: 90vw、max-height: 90vh、object-fit: contain，否则大图会拉伸或溢出 - 为防止点击遮罩时误触背景元素，需在
<dialog>上加pointer-events: auto（默认继承父级，可能被禁用）
IE 和旧版 Safari 的降级方案
<dialog> 在 IE 完全不支持，Safari 15.3 及更早版本仅部分支持。强行 polyfill（如 dialog-polyfill）会导致样式冲突和 focus 管理异常。
更稳妥的做法是检测支持性，降级为纯 CSS 模态层：
if (!dialog.showModal) {
// 切换到自定义 div + backdrop 方案
document.body.classList.add('dialog-open');
customDialog.style.display = 'block';
}
- 检测用
typeof dialog.showModal === 'function'，不要用'showModal' in dialog（Safari 15.3 返回 true 但实际不可用） - 降级时务必手动管理
tabindex和focus()，否则键盘用户无法操作关闭按钮 - 避免在降级方案中重复加载同一张图，用
src复用原<img>的currentSrc
真正难的不是放大动作本身，而是确保点击后焦点不丢失、Esc 键能关闭、触摸区域准确、缩放比例随设备适配——这些细节没处理好，用户会觉得“点了一下，什么都没发生”。
