object-fit: cover 不生效主因是父容器缺少明确宽高，需设置 width/height（含 aspect-ratio），图片设 100%/100%；注意 display、兼容性、safari 渲染及语义差异。

图片变形了，object-fit: cover 不生效？检查父容器有没有设宽高

很多情况下图片没按预期“居中裁切缩放”，不是 object-fit 有问题，而是它只对「有明确尺寸」的容器起作用。如果父容器是 height: auto 或完全没设 width/height，浏览器无法计算“覆盖”该覆盖多大范围。

• 必须给图片的直接父容器设置 width 和 height（可以是固定值、百分比或 aspect-ratio）
• 图片本身只需设 width: 100%; height: 100%，否则 object-fit 无参照基准
• 避免父容器用 display: inline 或未闭合的浮动——这些会让尺寸坍塌

object-fit: cover 和 background-size: cover 的关键区别

两者视觉效果相似，但底层机制完全不同：前者作用于 <img> 元素的内容盒，后者作用于元素的背景层。这意味着：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• object-fit 保留图片的语义和可访问性（alt 文本、SEO），background-image 不具备
• background-size: cover 可以配合 background-position 精确控制裁剪区域，object-fit: cover 默认居中，只能靠 object-position 微调（如 object-position: 20% 30%）
• 如果需要响应式懒加载或图片格式切换（WebP fallback），<img> + object-fit 更可控

IE 不支持 object-fit，降级方案怎么写才不翻车

IE11 及更早版本完全忽略 object-fit，此时图片会撑满容器并严重变形。不能只靠 @supports 判断，因为部分旧版 Edge 也存在兼容问题。

• 优先用 picture + img 配合 JS 检测：'objectFit' in document.documentElement.style
• 纯 CSS 降级：对 IE 使用 font-family: 'object-fit: cover' 这类 hack 不可靠，建议用 .no-objectfit 类配合 Modernizr 或手动 class 注入
• 最稳的 fallback 是用 background-image 替代，并把原 <img> 设为 visibility: hidden（而非 display: none），避免屏幕阅读器跳过

移动端 Safari 里 object-fit: cover 偶尔闪白屏？可能是渲染管线冲突

iOS 14–15 的某些 Safari 版本在快速滚动或视口外图片进入时，会出现短暂空白或错位，本质是 GPU 渲染层未及时同步。这不是代码写错，而是浏览器 bug。

• 给图片容器加 transform: translateZ(0) 或 will-change: transform 强制启用硬件加速（慎用，可能增加内存占用）
• 避免在 position: fixed 容器里嵌套 object-fit 图片，改用 position: sticky 或重新布局
• 如果使用 IntersectionObserver 加载图片，确保在 isIntersecting 为 true 后再设置 src，而不是监听前就赋值

实际用的时候，object-fit: cover 看似简单，但容器尺寸、语义需求、兼容边界和渲染细节这四点，漏掉任何一环都容易出视觉异常。特别是混合使用 CSS Grid / Flex 和响应式图片时，得一层层确认尺寸传递是否断裂。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！