object-fit: contain - CSS 属性详解

作者: 前端AC | 原文: https://juejin.cn/post/7501618843065630771

前言

小编做动画业务的时候，看代码用到了这个大小，专门来学习一下。

object-fit: contain - CSS 属性详解

📌 基本定义

object-fit: contain; 是 CSS 用于控制替换元素（如 <img>、<video>、<object>）内容如何适应容器尺寸的属性。

<img src="image.jpg" style="object-fit: contain;">

🌟 核心特性

特性	说明
保持宽高比	内容始终按原始比例缩放
完整显示内容	确保内容全部可见，不会被裁剪
可能产生留白	当容器比例与内容比例不一致时，自动添加空白区域
不拉伸变形	内容不会被迫填充容器导致失真

🔍 对比其他 object-fit 值

视觉对比表

/* 不同值的对比示例 */
.contain  { object-fit: contain; }  /* 保持比例+完整显示+留白 */
.cover    { object-fit: cover; }    /* 保持比例+填满容器+裁剪 */
.fill     { object-fit: fill; }     /* 忽略比例+拉伸填满 */
.none     { object-fit: none; }     /* 原始尺寸+不缩放 */
.scale-down { object-fit: scale-down; } /* 自动选择contain或none */

适用场景推荐

值	最佳使用场景	是否常用
contain	需完整展示内容（如证件照、产品图）	★★★★★
cover	背景图/横幅（允许裁剪边缘）	★★★★☆
fill	需要强制填充（通常不推荐）	★★☆☆☆
none	显示原始像素（特殊需求）	★★☆☆☆

🛠️ 实际应用示例

案例1：相册图片展示

<div class="gallery">
  <img src="photo.jpg" alt="Gallery Photo">
</div>

<style>
.gallery {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证照片完整显示 */
}
</style>

案例2：视频播放器适配

<video controls class="player">
  <source src="movie.mp4" type="video/mp4">
</video>

<style>
.player {
  width: 100%;
  height: 400px;
  object-fit: contain; /* 不同比例视频都能完整显示 */
  background: #000;    /* 留黑边时更美观 */
}
</style>

💡 进阶技巧

1. 配合 object-position 使用
   控制内容在容器中的对齐位置：

   img {
     object-fit: contain;
     object-position: top center; /* 顶部居中 */
   }

2. 响应式设计组合技

   .responsive-media {
     width: 100%;
     height: auto;
     aspect-ratio: 16/9; /* 固定比例容器 */
     object-fit: contain;
   }

3. 解决 Safari 兼容性问题
   添加 font-family: 'object-fit: contain;' Hack：

   img {
     font-family: 'object-fit: contain;';
   }

⚠️ 注意事项

1. 父容器需有明确尺寸
   object-fit 只在容器有固定 width/height 时生效

2. IE 完全不支持
   需使用 Polyfill 或备用方案：

   /* 备用方案示例 */
   img {
     width: auto;
     max-width: 100%;
     height: auto;
     max-height: 100%;
     /* 现代浏览器会覆盖此样式 */
     @supports (object-fit: contain) {
       width: 100%;
       height: 100%;
     }
   }

3. SVG 文件需特殊处理
   在 <svg> 标签内使用 preserveAspectRatio="xMidYMid meet" 达到类似效果

---

📚 扩展阅读

• MDN 官方文档
• CSS Tricks 使用指南
• CanIUse 兼容性表