object-fit: cover 通过等比缩放加裁剪填满容器，是否裁剪及裁多少取决于容器尺寸与图片原始比例的差值；常见失效原因是父容器未设宽高，导致无参照基准。
object-fit: cover 本身不裁剪也不缩放——它只是告诉浏览器“用等比缩放+必要裁剪的方式，把图片塞满容器”。真正决定是否裁剪、裁多少的，是容器尺寸和图片原始比例的差值。
为什么 object-fit: cover 看起来没生效
最常见原因是父容器没有明确宽高，导致浏览器无法确定“填满”该填多大。此时 object-fit 失去作用基准，图片退化为默认行为（如按原始尺寸渲染或被父级 max-width: 100% 拉伸）。
- 检查图片直接父元素是否设置了
width和height（可以是固定值、百分比，或aspect-ratio） - 避免父容器使用
display: inline、float未清除、或height: auto且无内容撑开 -
img元素自身必须设width: 100%和height: 100%，否则object-fit没有参照尺寸 - 不要在
img上同时写max-width: 100%却不设height，这会让高度坍塌为0
如何控制裁剪区域的位置
object-fit: cover 默认居中裁剪，但实际显示哪一部分由 object-position 决定。它接受类似 background-position 的语法，但只对替换元素有效。
- 默认值是
object-position: 50% 50%（居中），可改为object-position: top、object-position: 20% 30%等 - 响应式场景下，小屏想优先显示人脸？加媒体查询：
@media (max-width: 768px) { img { object-position: center top; } } - 注意：不能用
transform: translate()替代，那只是视觉偏移，裁剪逻辑不变
IE 和旧版 Edge 的降级处理
IE11 完全忽略 object-fit，且 @supports (object-fit: cover) 在部分旧 Edge 中会误判为支持。纯 CSS hack（比如用 font-family 触发）不可靠。
- JS 检测更稳：
'objectFit' in document.documentElement.style，然后动态加类名如.no-objectfit - 降级方案优先用
background-image：给容器设背景图，再把原img设为visibility: hidden（保留语义和可访问性） - 避免用
display: none隐藏原图，否则屏幕阅读器读不到alt文本 - 如果必须用 JS 加载 fallback 图，确保在 IntersectionObserver 回调触发后才设置
src，而非初始就赋值
Safari 移动端闪白或错位
iOS 14–15 的 Safari 在快速滚动或图片进入视口时，可能出现短暂空白——这不是代码错误，而是 GPU 渲染层同步延迟导致的已知 bug。
- 可尝试给容器加
transform: translateZ(0)或will-change: transform强制硬件加速 - 慎用
will-change，过多使用会增加内存压力，建议只加在确实滚动频繁的容器上 - 避免在
position: fixed的容器里嵌套object-fit图片，改用position: sticky或调整布局结构 - 如果用了懒加载，确认
loading="lazy"是在 DOM 渲染完成后再挂载，而不是服务端直出时就写死
最容易被忽略的是：裁剪量不是由 CSS 控制的，而是由容器宽高比与图片原始比例的差值决定的。哪怕写了 object-fit: cover，只要容器宽高比剧烈变化（比如从 16:9 切到 1:1），裁掉的部分就会完全不同——这不是 bug，是它的设计前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
