details标签不支持自动缩略图和懒加载，需手动用占位图+JS动态替换src，并优化summary样式、热区及动画以提升性能与可访问性。
details 标签本身不支持图片懒加载或自动缩略图生成
直接把 <img> 塞进 <details> 里能展开收起，但浏览器不会帮你生成缩略图、不会限制初始高度、也不会等用户点开才加载大图——这些都得自己补。
常见错误是只写：
<details><summary>我的画廊</summary><img src="big.jpg"></details>结果页面一打开就请求所有大图，首屏卡顿，移动端尤其明显。
- 用
loading="lazy"可缓解，但仅对滚动进入视口生效，<details>默认闭合时仍可能触发加载（Chrome 120+ 已修复部分情况，旧版 Safari 仍不稳定） - 更可靠的做法：初始用占位符或低质缩略图，
open事件触发后再替换src - 如果图多，建议配合
IntersectionObserver监听<summary>是否可见，而非依赖toggle事件（后者在键盘操作或屏幕阅读器下不一定触发）
summary 里放缩略图要绕过默认样式限制
<summary> 默认是 inline 元素，且多数浏览器会加一个三角箭头（list-style），直接塞 <img> 容易错位或被裁剪。
- 必须重置：
summary { display: grid; align-items: center; list-style: none; } - 缩略图建议固定宽高比（如
aspect-ratio: 4/3），并设width: 100%防止撑破容器 - 别用
<picture>或srcset在<summary>里——部分浏览器会提前解析并加载所有候选图
示例结构：
<details><summary><img src="thumb.jpg" width="120" height="90" alt="点击查看大图"></summary><img src="placeholder.jpg" data-fullsrc="big.jpg" alt="大图"></details>然后用 JS 在
details[open] 时把 data-fullsrc 赋给 src。
立即学习“前端免费学习笔记（深入）”；
移动端点击 summary 区域容易误触，需扩大热区
原生 <summary> 点击区域窄，尤其缩略图小的时候，手指点不准就会错过展开。不能只靠 CSS padding，因为部分 iOS 版本会忽略 <summary> 上的 padding 响应。
- 推荐方案：用
<button type="button">替代<summary>，手动控制open属性（details.open = !details.open），同时保留语义和可访问性 - 按钮内嵌缩略图后，加
display: block; width: 100%; height: 100%并设border: none; background: transparent - 务必加
aria-expanded和aria-controls属性，否则屏幕阅读器无法感知状态变化
多个 details 并列时，CSS 动画收起过程会闪烁
直接对 details:not([open]) > *:not(summary) 设 max-height: 0; overflow: hidden 加 transition，看似可行，但图片高度未知，max-height 很难设准——设小了裁剪，设大了动画慢半拍。
- 更稳的方案：用
clip-path+height组合过渡，例如：clip-path: inset(0 0 100% 0); height: 0;→clip-path: inset(0); height: auto; - 避免对
<img>直接做 transform 缩放动画，会导致模糊；优先动容器（<div>包一层） - 如果画廊项超过 5 个，建议用
will-change: transform提前提示合成层，否则快速连续点击可能掉帧
细节越多，越容易在 Safari 上遇到 clip-path 不触发重绘的问题——此时得加 transform: translateZ(0) 强制硬件加速。
