不能。HTML 无交互能力，CSS :hover 不支持移动端且无法保持状态，必须用 JavaScript 监听点击、切换 class 触发 transform: scale() 过渡，并兼顾键盘操作、防抖、ESC 关闭及图片加载策略。
点击缩略图后在原位展开大图，用纯 HTML + CSS 能实现吗？
不能。HTML 本身没有交互能力，<img> 标签点击不会自动切换尺寸或位置；CSS 的 :hover 只能响应悬停，且不支持移动端（无 hover 状态），也无法精准控制“点击后保持展开”。必须引入 JavaScript 来监听点击、切换状态、控制样式。
用 addEventListener 绑定点击，但别直接操作 style.width
硬编码修改 style.width 或 style.height 会覆盖 CSS 中的 transition、破坏响应式、且难以还原原始尺寸。正确做法是通过添加/移除 CSS 类来触发平滑过渡：
- 给缩略图容器（如
<div class="thumb">）绑定点击事件 - 点击时给对应的大图
<img class="fullsize">添加active类 - 在 CSS 中定义：
.fullsize { width: 100px; transition: width 0.3s ease, height 0.3s ease; }和.fullsize.active { width: 600px; height: auto; } - 注意：大图需提前加载（不要用
src动态赋值），否则展开瞬间会先空白再加载
transform: scale() 比直接改 width 更稳妥
直接拉伸 width/height 可能导致像素模糊、比例失真，尤其对高 DPR 屏幕。用 transform: scale() 是硬件加速的，性能好、边缘清晰、不影响文档流：
.fullsize {
transform: scale(0.2);
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fullsize.active {
transform: scale(1);
}
-
transform-origin: center确保从图片中心放大，视觉更自然 -
cubic-bezier曲线比ease更柔和，避免“弹跳感” - 如果缩略图和大图尺寸差异极大（比如 80×60 → 1200×800），建议先设
max-width: 100%; height: auto;防止溢出容器
移动端点击区域小、误触多，得加防抖和焦点管理
手机上连续点两下可能触发两次 active 切换，导致闪退；同时屏幕阅读器用户依赖键盘 Enter 触发，不能只靠 click：
立即学习“前端免费学习笔记（深入）”；
- 用
event.preventDefault()阻止默认行为（尤其当缩略图包在<a>里时） - 加简单防抖：
if (img.classList.contains('active')) return;再执行切换 - 同时监听
click和keydown（判断e.key === 'Enter'），并确保缩略图有tabindex="0" - 别忘了按 ESC 键关闭：
document.addEventListener('keydown', e => e.key === 'Escape' && img.classList.remove('active'));
真正难的不是放大动作本身，而是处理缩略图与大图的尺寸映射关系、避免布局偏移、兼顾键盘与触摸、以及在图片未加载完成时的占位策略——这些细节没处理好，平滑就变成卡顿或错位。
