object-fit: cover在响应式容器中不生效，主因是容器缺乏可计算高度（如height为auto或未设aspect-ratio），导致浏览器无缩放基准；必须同时满足：容器有明确宽高或比例、img设width:100%和height:100%、overflow:hidden。
object-fit: cover 为什么在响应式容器里不生效
写了 object-fit: cover 却没反应，大概率不是属性写错，而是容器没给浏览器“算缩放比”的依据。响应式场景下，父容器高度常为 auto 或依赖内容撑开，object-fit 就失去参照基准。
必须同时满足三个条件才可能生效：
- 父容器有可计算的高度（比如
height: 300px、aspect-ratio: 16/9，或用padding-bottom技巧模拟比例） -
<img>元素设了width: 100%和height: 100%（只设一个会失效） - 容器加了
overflow: hidden（尤其cover裁剪时，漏出边缘很常见）
旧版 Safari（iOS 12.2 之前）对 aspect-ratio 支持差，用 padding-bottom 时别忘了给 <img> 加 height: 100%，否则它仍按原始高渲染。
cover 和 contain 的语义区别直接影响信息传达
选错值会导致关键内容被切掉，或大面积留白破坏布局。
object-fit: cover：等比缩放至“短边刚好填满”，长边裁剪 → 适合头像、轮播图、封面图。人脸常偏上，需配合 object-position: center 20% 往上提。
object-fit: contain：等比缩放至“长边刚好贴住边界”，短边留白 → 适合产品主图、证件照、图表。此时 object-position 基本无效，整张图已在框内。
慎用 fill：强制拉伸必变形，现代项目中等于放弃可访问性和设计一致性。
圆形容器 + object-fit 的隐藏依赖
只写 border-radius: 50% 不够，容易出现圆角边缘漏出裁剪内容、底部多出空隙等问题。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须显式设置容器宽高（如 width: 120px; height: 120px;），不能只靠 aspect-ratio（IE 和老 Safari 不支持）；
务必加 overflow: hidden，否则 cover 裁剪部分会从圆角溢出；
<img> 设 display: block，避免行内默认基线对齐造成的底部空隙；
若用 Flex 布局，父容器记得加 align-items: stretch，否则子项 <img> 高度无法拉满。
IE 和旧版 Safari 的 fallback 实际怎么写
IE11 完全不识别 object-fit，iOS Safari 12.2 之前存在裁剪错位、闪烁 bug。纯 CSS fallback 对 <img> 标签无效 —— background-size: cover 只作用于 background-image。
兜底方案只能把图片从 src 移到容器的 background-image：
div.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background-image: url("avatar.jpg");
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
}
代价明确：丢失 alt 文本、SEO 友好性下降、原生懒加载失效（需手动补 loading="lazy" 或用 IntersectionObserver）。
现代项目若已用构建工具，建议优先用 PostCSS 插件自动注入 -webkit-object-fit，再针对 IE 单独降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
