直接给img加max-width:100%和height:auto能实现等比缩放，但前提是父容器有宽度约束；否则因无参照物、内联属性覆盖、flex/grid中min-width:auto阻碍或display:inline基线间隙等原因导致失效。
直接给 img 加 max-width: 100% 和 height: auto 就能实现容器内等比缩放，但前提是父容器有宽度约束——否则这两条根本不起作用。
为什么 max-width: 100% 没反应？
不是 CSS 写错了，而是浏览器找不到“100%”的参照物。常见卡点：
- 父
<div> 没设 <code>width、max-width或处于未约束的 flex/grid 容器中（比如没写flex-basis） - 父容器被
float或position: absolute拉离文档流，导致宽度坍缩为fit-content - 框架或重置样式里有
img { max-width: none }，覆盖了你的规则；用开发者工具看Computed面板确认最终值 - 图片本身带
width或height行内属性（如<img style="max-width:90%">），会强制覆盖height: auto -
width: 100%是“强制拉满”，小图会被撑宽变形；max-width: 100%是“最多不超”，原图比容器小时保持原尺寸，更自然 - 只有当你明确要求所有图片都填满父容器宽度（且已确认原始比例可接受拉伸）时，才考虑
width: 100%，但必须配height: auto，否则必失真 - 如果父容器是固定像素宽高（如卡片头像框
160px × 160px），那就别用max-width，改用object-fit: cover+width: 100%; height: 100% - 在图片或其父容器上显式加
min-width: 0（对 flex item）或min-height: 0（对 flex column 子项） - Grid 中同理：如果图片放在
grid-area里，且该区域由fr单位定义，也要检查是否被min-width锁死 - 验证方式：打开开发者工具，选中图片，在
Computed面板里搜min-width，看是不是显示auto -
<img>默认是display: inline，会在底部留出约4px空白（来自基线对齐） - 加
display: block能彻底消除这个空白，避免容器高度异常或对齐错位 - 它不影响缩放逻辑，只是清理视觉干扰，建议作为基础样式的一部分
width: 100% 和 max-width: 100% 到底该用哪个？
绝大多数场景下必须用 max-width: 100%，而不是 width: 100%：
Flex/Grid 布局里图片缩放失效怎么办？
Flex 容器默认给子项加了 min-width: auto，它会阻止图片收缩——哪怕你写了 max-width: 100%，图片仍可能撑破容器：
要不要加 display: block？
要，尤其当图片在段落或行内上下文中使用时：
真正容易被忽略的不是怎么写 CSS，而是父容器是否真的“有宽度”——很多问题查半天，最后发现只是忘了给外层 <div> 加 <code>width: 100% 或漏了 viewport meta 标签。缩放行为永远依赖层级间的尺寸传导，断掉一环，整个链路就失效。
