图片在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> 的 bug，而是它本身不干预子元素布局，图片仍按默认 inline 行为渲染，且未继承父容器的宽度约束。
关键不是改 <details> 或 <summary>，而是控制其内部 <img> 的 CSS 行为：
-
img必须设display: block（否则受 inline 空隙和换行影响） - 宽度必须用
max-width: 100%而非width: 100%（避免拉伸低分辨率图） - 高度设为
height: auto以维持宽高比 - 如果父容器（比如
<div>包裹在<details>内）有 padding 或 max-width，要确保它没被忽略
示例最小可行样式：
details img {
display: block;
max-width: 100%;
height: auto;
}
为什么用了 max-width:100% 还是撑破 details 容器？
常见原因是父级容器没设宽度限制，或存在未清除的浮动、flex 项目未设 min-width: 0 导致图片强制撑开。
立即学习“前端免费学习笔记（深入）”；
检查以下三点：
-
<details>直接子元素如果是<div>，该<div>是否写了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 过渡。
推荐组合写法：
- 给
<details>的<div>（即图片容器）设overflow: hidden和max-height: 0初始态 -
<details>[open] > div设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> 不影响图片资源选择逻辑，所以模糊本质是 src 指向了低分辨率图。此时应放弃单图写法，改用 <picture> + srcset。
但要注意：<picture> 必须完整嵌套在 <details> 内部，且每个 <source> 的 media 和 sizes 仍需合规，否则浏览器静默回退到 <img> fallback —— 这时候你看到的“模糊图”很可能就是那个 fallback。
验证方法：打开 DevTools → Network → 刷新并展开 <details>，看加载的是哪个 URL；再检查响应头 Content-Type 是否与 type="image/webp" 一致。
最易被忽略的一点：很多人在 <details> 里用 <img src="xxx.jpg"> 时，以为加了 max-width 就万事大吉，却没意识到——这张图本身在 2x 屏上物理像素只有 1/4，再怎么缩放也补不回细节。真正该动的是资源分发层，不是 CSS 层。
