缩略图与主图联动需HTML结构、CSS布局、JS逻辑协同实现：主图区（.main-view）与缩略图区（.thumbnail-view）为同级兄弟元素，缩略图用data-fullsrc存原图路径，通过事件委托绑定点击并同步active状态及src，配合Grid布局与object-fit确保清晰自适应。
img 元素本身不支持“多级缩略图联动”，必须靠 HTML 结构 + CSS 布局 + JS 逻辑三者配合才能实现。纯用 srcset 或 picture 只能解决“单张图适配不同设备”，不能触发点击切换、主图同步、焦点高亮等交互行为。
怎么组织 HTML 结构让缩略图和主图可联动
结构要分层清晰，避免嵌套过深或语义混乱。主图区和缩略图区必须是同级兄弟元素，且各自有明确的 class 标识：
- 主图区域用
<div class="main-view">包裹<img>，不要直接把img放在 body 下 - 缩略图列表用
<div class="thumbnail-view">包裹一组<img class="js-post">，每个缩略图带data-fullsrc存原图地址 - 所有缩略图必须有唯一可识别的索引方式：要么靠
data-index，要么靠 DOM 顺序（Array.from(els).indexOf(el)） - 避免给缩略图加
width/height属性——这会干扰 CSS 响应式计算；用 CSS 控制尺寸更可控
为什么用 CSS Grid 而不是 Flexbox 布局缩略图网格
Flexbox 在图片宽高不一致、动态加载或窗口缩放时容易断行错位，最后一行缩略图数量少，左右留白不均。Grid 的 auto-fit + minmax() 才能真正填满容器宽度并保持列宽一致：
- 核心声明：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) - 必须配
gap: 8px控制间距；用margin模拟会破坏网格对齐逻辑 - 缩略图
img自身加width: 100%; height: auto; display: block;防止底部留空白 - IE10+ 兼容写法：用
grid-column-gap和grid-row-gap替代gap
JS 怎么绑定点击事件并同步主图与高亮状态
关键不是“换 src”，而是确保状态同步、避免重复绑定、处理加载失败：
立即学习“前端免费学习笔记（深入）”；
- 用事件委托绑定到
.thumbnail-view，而不是每个缩略图单独addEventListener - 点击后先更新主图：
document.querySelector('.js-main').src = clickedImg.dataset.fullsrc - 再清除所有缩略图的
activeclass，给当前缩略图加：clickedImg.classList.add('active') - 必须监听主图
load和error：加载失败时回退到 placeholder，并清空active状态防止误判 - 别用
onclick=""行内 JS —— 不利于维护，也难做错误处理
缩略图点击放大时，怎么避免模糊和错位
模糊来自两个地方：一是缩略图本身分辨率太低，二是放大后浏览器插值拉伸。错位则常因定位方式不当：
- 缩略图源图建议至少 240px 宽（对应 2x 屏），用
srcset提供120w/240w两档，由sizes控制选取逻辑 - 放大预览区不要用
transform: scale()直接撑大缩略图——那只是像素拉伸；应该用data-fullsrc换成原图，再控制容器尺寸 - 预览容器设
max-width: 90vw; max-height: 80vh;并用object-fit: contain;居中显示，不裁剪 - 如果用
dialog实现轻量弹窗，记得加showModal()调用，否则 Safari 不触发模态行为
最易被忽略的是缩略图 data-fullsrc 路径是否与主图一致——相对路径容易因 HTML 入口位置变化而失效，建议统一用从站点根目录起算的路径（如 /images/photo-large.jpg），并确保服务器已部署该资源。
