必须用max-width: 100%而非width: 100%，因后者强制拉伸失真，前者仅设上限并配合height: auto才能等比缩放；父容器需有明确宽度，object-fit不替代该方案。
图片默认不随容器缩放，必须显式设置 max-width: 100% 和 height: auto 才能真正自适应。
为什么 width: 100% 不够用？
直接写 width: 100% 会让图片强行拉伸填满容器，破坏宽高比；而 max-width: 100% 是“上限约束”，图片在原始尺寸小于容器时保持原样，在超出时才收缩，配合 height: auto 才能等比缩放。
常见错误现象：img 在小屏上被压扁、文字周围留白异常、object-fit 失效（因父容器没设宽高）。
- 始终优先用
max-width: 100%，不是width: 100% - 必须加
height: auto，否则高度可能塌陷或固定为 0 - 若父容器无明确宽度（如
display: flex下的子项），需确保父级有width或flex-basis
响应式图片要不要用 srcset？
要，但和 CSS 自适应是两件事：srcset 控制「加载哪张图」，CSS 控制「怎么显示这张图」。不加 srcset 会导致小屏也下载大图，浪费带宽。
立即学习“前端免费学习笔记（深入）”；
使用场景：适配不同 DPR（如 1x/2x 屏）、不同视口宽度（w 描述符）。
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">-
sizes必须写，否则浏览器无法判断当前需要多宽的图 - 不要只为 DPR 写
2x，现代设备混合 DPI 普遍，w+sizes更可靠
object-fit 能替代 max-width 吗？
不能。两者职责完全不同：object-fit 只影响图片在「已有宽高框内」的裁剪/拉伸方式，前提是容器本身已有确定尺寸（比如设置了 width 和 height）。
典型误用：给 img 加了 object-fit: cover 却没设容器宽高 → 图片仍按原始尺寸渲染，object-fit 完全不生效。
- 想让图片填满一个 200×150 的卡片？先给容器设
width: 200px; height: 150px;，再加object-fit: cover; - 想让图片随容器流式缩放？回到第一原则：
max-width: 100%; height: auto; -
object-fit对background-image无效，那是background-size的事
最易被忽略的一点：父容器如果用了 display: grid 或 flex，且未限制 img 的最大宽度，它可能突破网格轨道或弹性项的边界——此时必须在 img 上加 max-width: 100%，而不是只靠容器约束。
