图片在details中不自适应是因img默认inline且无宽度约束，需设display:block、max-width:100%、height:auto；溢出常因父容器缺宽限或flex未设min-width:0；动效宜用容器opacity+max-height配合img缩放；模糊源于dpr不匹配，应改用picture+srcset响应式资源。

details标签里图片不随展开收缩自适应？

直接写 <img> 且没加任何样式时，<details></details> 展开后图片宽度常溢出容器或保持原始尺寸——这不是 <details></details> 的 bug，而是它本身不干预子元素布局，图片仍按默认 inline 行为渲染，且未继承父容器的宽度约束。

关键不是改 <details></details> 或 <summary></summary>，而是控制其内部 <img> 的 CSS 行为：

• img 必须设 display: block（否则受 inline 空隙和换行影响）
• 宽度必须用 max-width: 100% 而非 width: 100%（避免拉伸低分辨率图）
• 高度设为 height: auto 以维持宽高比
• 如果父容器（比如 <div> 包裹在 <code><details></details> 内）有 padding 或 max-width，要确保它没被忽略

  示例最小可行样式：

  details img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  为什么用了 max-width:100% 还是撑破 details 容器？

  常见原因是父级容器没设宽度限制，或存在未清除的浮动、flex 项目未设 min-width: 0 导致图片强制撑开。

  检查以下三点：

  • <details></details> 直接子元素如果是 <div>，该 <code><div> 是否写了 <code>width: 100% 或 max-width？没写就等于无限宽
  • 若用 Flex 布局包裹图片（比如 details > div { display: flex }），必须加 min-width: 0 防止图片溢出
  • 某些 CSS 重置库会把 img 设为 vertical-align: middle 并引入基线对齐间隙，此时仅 display: block 就能解决

  想让 details 展开时图片淡入+等比例缩放，怎么加动效？

  CSS transition 不能直接作用于 height: auto，所以不能对图片本身做展开动画；但可以对包裹它的容器做 opacity + max-height 动画，再配合图片的 scale 过渡。

  
  anything-to-html
  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
  下载

  推荐组合写法：

  • 给 <details></details> 的 <div>（即图片容器）设 <code>overflow: hidden 和 max-height: 0 初始态
  • <details>[open] > div</details> 设 max-height: 500px（取足够大值，避免截断）和 opacity: 1
  • 图片本身加 transition: transform 0.2s ease, opacity 0.2s ease，并在 open 状态下加 transform: scale(1)（初始设 scale(0.95)）

  注意：不要对 img 直接设 height 动画，会导致失真或跳变。

  移动端下图片模糊或 DPR 不匹配怎么办？

  <details></details> 不影响图片资源选择逻辑，所以模糊本质是 src 指向了低分辨率图。此时应放弃单图写法，改用 <picture></picture> + srcset。

  但要注意：<picture></picture> 必须完整嵌套在 <details></details> 内部，且每个 <source></source> 的 media 和 sizes 仍需合规，否则浏览器静默回退到 <img> fallback —— 这时候你看到的“模糊图”很可能就是那个 fallback。

  验证方法：打开 DevTools → Network → 刷新并展开 <details></details>，看加载的是哪个 URL；再检查响应头 Content-Type 是否与 type="image/webp" 一致。

  最易被忽略的一点：很多人在 <details></details> 里用 <img src="xxx.jpg"> 时，以为加了 max-width 就万事大吉，却没意识到——这张图本身在 2x 屏上物理像素只有 1/4，再怎么缩放也补不回细节。真正该动的是资源分发层，不是 CSS 层。