不能，html 本身无放大预览语义，需 css 定位+js 控制三层结构（原图容器、固定遮罩层、绝对定位大图容器），并注意移动端兼容、内存泄漏及细节交互。
点击图片触发放大，用原生 HTML + CSS 能否实现
不能。HTML 本身没有“放大预览”语义或行为，<img> 标签只负责加载和显示，缩放、遮罩、关闭等交互必须靠 CSS 动画 + JavaScript 控制。强行只用 transform: scale() 或 zoom 会导致溢出、无遮罩、无法关闭、不居中等问题。
最简可用的结构：三层 DOM 必须明确分工
放大预览效果本质是「覆盖层」逻辑，结构上至少需要三部分：
- 原始图片容器（可带
data-src 存高清图）
- 全屏遮罩层（
<div class="overlay">，<code>display: none 初始隐藏）
- 遮罩内的大图容器（
<div class="preview-img-wrapper">，含 <code><img> 和关闭按钮）
常见错误是把大图直接塞进原 <img> 标签并试图用 position: fixed 拉伸——这样会破坏文档流，且无法响应点击关闭。
关键 CSS 规则：遮罩与图片定位不能依赖 flex 垂直居中
flex 在某些移动端浏览器（如旧版 iOS Safari）对 min-height: 100vh 支持不稳定，容易导致遮罩高度塌陷。更稳妥的方式是：
- 遮罩层设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
- 大图容器用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
- 大图本身加
max-width: 90vw; max-height: 80vh; object-fit: contain; 防止拉伸失真
注意：不要给大图设 width: 100%，否则高图会被强制压扁；object-fit: contain 是保比例前提下的安全选择。
JS 绑定要点：避免重复绑定和内存泄漏
每次点击都动态创建新 DOM 节点（比如每次都 document.createElement('div')），却不销毁，下次再点就会叠加多个遮罩。正确做法是：
- 全局只维护一个
overlay 元素，首次点击时初始化，后续复用
- 监听遮罩层的
click 事件时，用事件委托判断是否点在关闭按钮或遮罩背景上（event.target === overlay || event.target.classList.contains('close-btn')）
- 移除遮罩前调用
overlay.querySelector('img').src = ''，防止图片缓存残留或加载卡顿
如果页面有多个图片，别给每个都写独立 onclick 行内函数，统一用 document.querySelectorAll('.preview-trigger').forEach(...) 绑定。
图片预览看似简单，真正上线时最容易翻车的是：移动端 touch 事件未兼容、键盘按 Esc 关闭没监听、图片加载中就点击导致空白、以及遮罩层 z-index 被其他组件（如弹窗、导航栏）意外覆盖。这些细节不测到真机很难发现。
- 原始图片容器（可带
data-src存高清图） - 全屏遮罩层（
<div class="overlay">，<code>display: none初始隐藏） - 遮罩内的大图容器（
<div class="preview-img-wrapper">，含 <code><img>和关闭按钮） 常见错误是把大图直接塞进原<img>标签并试图用position: fixed拉伸——这样会破坏文档流，且无法响应点击关闭。关键 CSS 规则：遮罩与图片定位不能依赖 flex 垂直居中
flex在某些移动端浏览器（如旧版 iOS Safari）对min-height: 100vh支持不稳定，容易导致遮罩高度塌陷。更稳妥的方式是：- 遮罩层设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 大图容器用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 大图本身加
max-width: 90vw; max-height: 80vh; object-fit: contain;防止拉伸失真
width: 100%，否则高图会被强制压扁；object-fit: contain是保比例前提下的安全选择。JS 绑定要点：避免重复绑定和内存泄漏 每次点击都动态创建新 DOM 节点（比如每次都
document.createElement('div')），却不销毁，下次再点就会叠加多个遮罩。正确做法是：- 全局只维护一个
overlay元素，首次点击时初始化，后续复用 - 监听遮罩层的
click事件时，用事件委托判断是否点在关闭按钮或遮罩背景上（event.target === overlay || event.target.classList.contains('close-btn')） - 移除遮罩前调用
overlay.querySelector('img').src = ''，防止图片缓存残留或加载卡顿
onclick行内函数，统一用document.querySelectorAll('.preview-trigger').forEach(...)绑定。 图片预览看似简单，真正上线时最容易翻车的是：移动端 touch 事件未兼容、键盘按Esc关闭没监听、图片加载中就点击导致空白、以及遮罩层z-index被其他组件（如弹窗、导航栏）意外覆盖。这些细节不测到真机很难发现。 - 遮罩层设
