CSS object-fit:cover 如何只显示图片上部？

使用 object-fit: cover 处理图片时，默认的裁剪基准是图片正中心。例如一张 800×1200 的竖向图片放进 400×300 的横向容器，浏览器会按比例放大图片直到完全覆盖容器，再把多出来的上下区域裁掉。由于默认 object-position 为 50% 50%，顶部与底部被裁掉的面积相同，顶部信息就会丢失。要固定显示图片上部，需要在设置 object-fit: cover 的基础上，把 object-position 改为 top 或 0% 0%。下面先解释 cover 的缩放原理，再给出完整实现和兼容处理。

object-fit: cover 的裁剪机制

object-fit 是 CSS 中控制替换元素内容适配容器的属性，适用于 <img>、<video> 等元素。它有几个常见取值：fill、contain、cover、none、scale-down。fill 会拉伸图片以填满容器，容易变形；contain 会完整显示图片，但可能留下空白；cover 则在不改变宽高比的前提下放大图片，使图片完全覆盖容器，超出部分被裁掉。

cover 的缩放计算过程可以概括为：先比较容器与图片的宽高比，如果图片比容器更宽，就按高度方向放大；如果图片更高，就按宽度方向放大。比如容器宽 400px、高 300px，宽高比约 1.33；图片宽 800px、高 1200px，宽高比约 0.67。图片相对更高，因此需要让图片宽度从 800px 放大到 400px 的对应比例，即缩放系数取容器宽度与图片宽度之比 0.5，放大后图片尺寸为 400×600。容器只有 300px 高，于是上下各溢出 150px。默认 object-position 是 50% 50%，浏览器会居中显示图片，所以顶部和底部各裁掉 150px。如果希望保留顶部，就要把纵向对齐点移动到 0%。

下面是一段基础样式，只设置 object-fit: cover 的效果就是居中裁剪。

.image-box {
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

使用 object-position: top 固定显示上部

object-position 用来控制替换元素内容在容器中的位置，语法与 background-position 类似，可以写关键字、百分比或长度值。要显示图片上部，最简单的写法是在 object-fit: cover 后面加上 object-position: top。

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

这里 top 表示纵向对齐到图片顶部，横向保持居中。如果只想明确两个方向的偏移，可以写 object-position: 50% 0%。第一个值控制横向位置，第二个值控制纵向位置。纵向 0% 表示图片顶部与容器顶部对齐，溢出的部分全部出现在底部，顶部内容自然保留。

object-position 的百分比计算并不等同于图片本身的百分比，而是基于容器尺寸与图片尺寸的差值。以纵向溢出 300px 为例，0% 对应偏移量 0，即顶部对齐；100% 对应偏移量 300px，即底部对齐；50% 对应偏移量 150px，即居中。因此 object-position: 50% 0% 与 top 在纵向效果一致，横向则是中心。也可以使用长度值，比如 object-position: 0 0 表示横向和纵向都从左上角开始。若只想显示顶部且靠左，就写 object-position: left top。

完整的 HTML 结构如下：

<div class="image-box">
  <img src="photo.jpg" alt="人物照片">
</div>

搭配上面的 CSS，图片会优先展示上半部分。对于头像、商品主图、新闻缩略图等场景，顶部通常是主体信息的集中区域，这种写法能有效避免人物脸部或标题被裁掉。

兼容性、替代方案与动态调整

object-fit 与 object-position 在现代浏览器中支持良好，包括 Chrome、Firefox、Safari 和 Edge。需要注意的是，早期 IE 浏览器完全不支持这两个属性。如果项目仍需兼容旧版 IE，可以考虑使用背景图方案。把图片放到容器背景中，设置 background-size: cover 和 background-position: top center，可以达到类似显示上部裁剪的效果。

.background-box {
  width: 400px;
  height: 300px;
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

这个方案的缺点是图片不再是 <img> 元素，不利于 SEO 和无障碍访问。如果对语义要求较高，可以在容器内隐藏一张 <img>，仅作为内容存在，视觉上使用背景图展示。不过随着 IE 市场份额持续下降，直接使用 object-fit 与 object-position 已经可以覆盖绝大多数用户。

动态调整 object-position 也很方便。假设用户上传的图片重点位置不确定，可以通过 JavaScript 读取图片真实尺寸，结合容器尺寸计算溢出量，再设置对应的 position 值。对于简单需求，媒体查询也能实现不同屏幕下显示不同区域。例如移动端显示图片顶部，桌面端显示中间：

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
@media (min-width: 768px) {
  .image-box img {
    object-position: 50% 50%;
  }
}

此外，object-position 支持过渡动画，可以在状态切换时平滑移动显示区域。比如鼠标悬停时从顶部逐渐移动到中间。不过要注意，动画性能不如 transform，且只对替换内容有效。实际项目里更推荐在需要突出不同区域时，直接切换类名而不是频繁做动画。

CSS object-fitcover图片裁剪修改时间：2026-09-30 11:46:46