html原生标签仅支持按尺寸预览图片，不具备放大查看功能；真正放大需通过dialog+transform缩放、第三方库或服务端协同等额外逻辑实现。
HTML图片预览 ≠ 放大查看，别混淆这两个行为
直接说结论：HTML原生的 <img> 标签只负责“预览”——即按指定尺寸加载并显示图片；它本身不提供“放大查看”能力。所谓“放大”，本质是改变视口缩放、图片裁剪、或切换更高分辨率资源，需要额外逻辑支撑。
为什么 <img src="x.jpg"> 点击后不会自动放大
浏览器渲染 <img> 时，只做一件事：把图片按 width/height 或 CSS 尺寸拉伸/缩放到容器内。没有内置点击事件、无缩放状态管理、不加载高清图源——这些全得你手动补。
- 常见错误现象：
click后弹出新 tab 打开原图，这不是放大，只是跳转 - 真实放大场景需要：保留当前页面上下文、支持拖拽/滚轮缩放、双击复位、边界限制
- 如果只用
<picture></picture>或srcset，只是响应式“换图”，不是交互式“放大”
实现真正放大查看的三个可行路径
选哪种取决于你的控制粒度和兼容性要求：
-
轻量方案（推荐初试）：用
dialog+transform: scale()+overflow: hidden容器，配合mousewheel和mousedown事件。优点是不依赖库，CSS 控制力强；缺点是移动端手势（如 pinch-zoom）需额外处理 -
兼容方案：引入
lightgallery.js或fslightbox，它们封装了缩放、动画、键盘导航，但要注意data-src必须指向原始高清图，否则放大后一片模糊 - 服务端协同方案：前端请求带
?zoom=2参数，后端返回对应缩放倍率的切片或 WebP 缩略图（类似地图瓦片），适合超大图（>10MB）场景；此时<img>只是占位，真实渲染由 Canvas 或<canvas></canvas>+drawImage完成
容易被忽略的关键细节
很多实现卡在细节上，不是逻辑错，而是漏了约束：
-
img的draggable="false"必须加，否则 Chrome 下拖拽图片会触发默认下载 - 用
transform: scale()时，记得给父容器设transform-origin: 0 0或动态计算中心点，否则缩放会偏移 - 移动端双指缩放默认被浏览器拦截，要加
<meta name="viewport" content="user-scalable=no">并自己接管touchstart/touchmove - 放大后图片内存暴涨，Chrome 对单张
<img>解码尺寸有隐式限制（约 32MP），超限会静默失败，建议用createImageBitmap()分块解码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
