语义化图片响应式默认解法是max-width: 100% + height: auto；object-fit需固定容器尺寸才生效；aspect-ratio防加载塌陷；srcset/sizes解决模糊而非拉伸。
max-width: 100% + height: auto 是语义化图片的默认解法
绝大多数文章配图、产品图、博客插图，直接加这两条就足够了——它不强制放大，只在容器变窄时等比缩小，且浏览器会自动按原始宽高比推算高度。
常见错误现象：width: 100% 单独使用导致小图被拉伸模糊；height 属性（HTML 或 CSS）写死像素值，直接破坏比例；没写 height: auto，结果被父级 line-height 或 flex 的 align-items: stretch 拉高。
-
max-width: 100%是“上限”，不是“目标”，小图保持原尺寸 - 必须显式写
height: auto，不能依赖浏览器默认行为 - 加
display: block可避免 inline 元素带来的底部空白 - 父容器必须有可计算宽度（比如
width: 100%、max-width: 800px），否则max-width: 100%失效
object-fit 需要搭配固定尺寸容器才生效
object-fit 不是响应式缩放方案，而是“内容填充策略”。它只在父容器有明确宽高（或能推导出宽高）时起作用，常用于卡片、轮播项、头像等固定区域。
典型失效场景：父容器 height: auto、flex 子项未设 min-height: 0、Grid 项未约束尺寸，此时 object-fit 完全不触发。
-
object-fit: cover：适合 Banner 或封面，裁剪但不拉伸，需配合width: 100%; height: 100%和object-position: center -
object-fit: contain：完整显示，留白，适合图标、证件照 -
object-fit: fill：强行拉满，必然变形，慎用 - IE 不支持，兼容方案是改用
background-image+background-size: cover，但会丢失alt和语义化
aspect-ratio 是防止加载前塌陷的关键
图片加载前，浏览器无法知道原始尺寸，height: auto 可能暂时失效，造成布局抖动。此时靠 aspect-ratio 提前锁定比例，比 JS 占位更轻量可靠。
它适用于外层容器（如 figure、卡片 wrapper），而不是直接写在 img 上——img 本身不响应 aspect-ratio。
- 写法示例：
figure { aspect-ratio: 4/3; width: 100%; }+img { width: 100%; height: 100%; object-fit: cover; } - 旧版 Safari 需加
-webkit-aspect-ratio前缀 - 不能和
height同时设，否则冲突 - Flex/Grid 中，若子项塌陷成一条线，大概率是缺了
min-height: 0或aspect-ratio
srcset 和 sizes 不解决拉伸，但影响是否模糊
拉伸是 CSS 尺寸控制问题，模糊是资源匹配问题。即使 max-width: 100% 写对了，如果 srcset 里没提供高 DPR 图片，大屏下依然会像素化。
常见错误：sizes="(max-width: 768px) 100vw, 50vw" 但 srcset 只有 @2x 版本，iPhone 15 Pro Max（DPR=3）就会降级模糊。
-
srcset列出的是资源“可用性”，单位用w（视口像素宽度）比x（DPR）更可控 -
sizes必须真实反映图片在不同断点下“打算占多宽”，否则浏览器选错资源 - 始终保留
src作为降级 fallback - 工具建议：用
sharp批量生成400w.jpg、800w.jpg等，别手拼@2x
min-height: auto 的默认行为。这两个点不处理，max-width: 100% 和 object-fit 都可能静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
