img { width: 100%; height: auto; } 不生效的根本原因是父容器无明确宽度参照，如仅设 display: flex 未配 width/min-width: 0，或 srcset/sizes 未正确配对导致资源加载失当。
图片宽度自适应不是加个 width: 100% 就完事——它必须和父容器宽度、max-width、display 类型三者协同，缺一不可。
img { width: 100%; height: auto; } 为什么有时不生效
这不是 CSS 写错了，而是浏览器找不到“100% 的参照对象”。width: 100% 是相对于父容器计算的，如果父容器没明确宽度（比如只写了 display: flex 却没设 width 或 flex-basis），那这个 100% 就是 NaN。
- 父
<div> 没设 <code>width、max-width或flex: 1→ 图片宽度坍缩或溢出 - 父容器是 Flex 项，默认
min-width: auto→ 小屏下图片拒绝收缩，需显式加min-width: 0 - 父容器用了
position: absolute且没给left/right→ 宽度退化为内容宽，100%失效 - 漏写
height: auto→ 浏览器按原始高度渲染，导致拉伸或错位 - 给图片加
max-width: 100%+height: auto是基础 - 给父 Flex 项加
min-width: 0（关键！否则max-width被忽略） - 若父是 Grid 项，同样要加
min-width: 0，否则图片无视容器约束 - 极端情况可加
flex-shrink: 0到图片上，但通常没必要——先调父项 - 独立展示图 → 加
display: block，四边margin稳定可用 - 图文混排需保留 inline → 改用
vertical-align: top或middle，再配合margin微调 - 用 Flex 包裹图片 → 容器设
display: flex; align-items: center，图片无需改display，margin自然生效 - 别碰已废弃的
hspace/vspace属性，现代浏览器完全忽略 -
srcset中的w单位是图片源的**固有宽度**（如image-800w.jpg表示该图原始宽 800px） -
sizes必须匹配 CSS 中该图片所在容器的**实际显示宽度逻辑**（如sizes="(max-width: 768px) 100vw, 50vw"） - 只写
srcset不写sizes→ 浏览器默认按100vw选图，大概率选大了 - 测试时打开 Chrome DevTools → Network → Filter “Large resources”，确认加载的是合适尺寸的图，而非仅靠预览判断
Flex/Grid 容器里图片撑开父项怎么办
Flex 和 Grid 默认让子项“宁可撑开也不缩小”，这是 flex-shrink: 1 和 min-width: auto 共同作用的结果。图片作为子项，会优先保持原始尺寸。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
margin 在图片上下边不生效？先看 display
图片默认是 inline 元素，垂直方向的 margin-top/margin-bottom 受限于行高与基线对齐，视觉上“像没反应”。这不是 bug，是 inline 行为本身。
真正卡住人的从来不是 width，而是 srcset/sizes 没配对
只靠 CSS 缩放，手机可能加载 4K 原图再压到 300px 显示——带宽浪费、首屏慢、CLS（布局偏移）飙升。自适应宽度必须和响应式资源加载同步。
