img设width:100%高度塌陷主因是inline属性及无宽高比约束；应设display:block、父容器明确宽度与aspect-ratio，object-fit仅控制填充方式而非尺寸。
img 标签用 width:100% 但高度塌陷？
这是最常见错觉：以为设了 width: 100% 图片就“响应式”了，结果在不同容器里高度忽高忽低，甚至直接缩成一条线。根本原因是 img 默认是 inline 元素，会受行内布局、字体大小、vertical-align 影响；更关键的是，它不自动维持宽高比。
解决思路不是硬塞 height，而是让浏览器知道“我想保持比例”。object-fit 不是给 img 用的万能膏药——它只在 display: block 或显式设了宽高的容器里才可靠生效。
- 给
img加display: block，消除基线对齐干扰 - 父容器必须有明确宽度（比如
max-width: 100%），否则width: 100%无意义 - 别单独依赖
object-fit，它只控制“怎么填”，不解决“填多大”的问题
object-fit: cover 和 contain 怎么选？
这两个值行为差异极大，选错会导致图像被意外裁剪或留白难看，而且在 Safari 旧版本里 cover 有渲染抖动 bug。
object-fit: cover 会等比缩放并裁剪，确保填满容器；object-fit: contain 等比缩放但完整显示全图，可能上下/左右留空。
立即学习“前端免费学习笔记（深入）”；
- 做封面图、卡片主图 → 用
cover，但得接受边缘被切 - 做产品图、证件照预览 → 用
contain，避免信息丢失 - Safari 12–14 对
cover在 flex 容器中支持不稳定，加align-self: stretch可缓解
父容器没设 height，object-fit 就失效？
对。如果父容器高度是 auto（比如纯靠内容撑开），object-fit 实际没作用对象——因为“填满”没有参照高度。这时你看到的还是原始图片尺寸或 inline 布局残留行为。
常见误操作是只写：.img-wrap img { width: 100%; object-fit: cover; }，但 .img-wrap 没设高也没设 aspect-ratio。
- 稳妥做法：给父容器设
aspect-ratio: 16 / 9（现代浏览器支持良好） - 兼容方案：用 padding-bottom 百分比模拟宽高比，再绝对定位
img - 别用
height: 0+padding-bottom后又忘记position: relative，否则img会脱标乱飘
背景图 vs ![CSS响应式图片响应式高度_利用object-fit避免图像拉伸]()
+ object-fit 性能差在哪？
用 CSS background-image 能轻松实现响应式裁剪，但语义和可访问性丢了；而 img + object-fit 支持 srcset、loading="lazy"、alt 文本，SEO 和屏幕阅读器友好。
性能上差别不大，但加载逻辑不同：背景图不参与 HTML 渲染流，不会触发浏览器对图片资源的优先级提升；img 标签会被预加载器识别，尤其带 srcset 时能按视口密度选最优图。
- 需要 SEO、可访问性、懒加载 → 死守
img+object-fit - 只是装饰性渐变蒙层或重复平铺 → 用 background 更轻量
- 别在
img上同时写background-image，CSS 层叠会让前者完全不可见
真正麻烦的不是 object-fit 本身，而是它依赖的整个盒模型上下文：display 类型、父容器约束、宽高比声明、甚至 vertical-align 的历史遗留影响。漏掉其中一环，图像就会悄悄“失重”。
