object-fit: contain - CSS 属性详解前言小编做动画业务的时候，看代码用到了这个大小，专门来学习

前言

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

`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>

💡 进阶技巧

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

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

响应式设计组合技

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

解决 Safari 兼容性问题
添加 font-family: 'object-fit: contain;' Hack：
```
img {
  font-family: 'object-fit: contain;';
}
```

⚠️ 注意事项

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

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

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

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

📚 扩展阅读

MDN 官方文档

CSS Tricks 使用指南

CanIUse 兼容性表

object-fit: contain - CSS 属性详解

前言