CSS `object-fit` / `object-position`：图片在容器中的填充与裁剪控制

各位观众老爷们，晚上好！今天咱们聊点前端开发里的小技巧，但威力可不小——CSS 的 object-fit 和 object-position。别看名字有点高冷，其实它们就是用来控制图片和视频在容器里怎么显示的，是让它们乖乖听话，还是放飞自我，全看你心情了。

开场白：为啥要有这俩玩意儿？

想象一下，你手里有一堆尺寸不一的图片，你想把它们都塞到一个固定大小的框框里。如果不加任何处理，结果很可能惨不忍睹：

拉伸变形： 图片被强行拉宽或压扁，变成“哈哈镜”里的效果。
超出边界： 图片太大，超出容器范围，一部分被裁掉了。
留白尴尬： 图片太小，容器里出现大片空白，显得空荡荡的。

这时候，object-fit 和 object-position 就闪亮登场了，它们能帮你优雅地解决这些问题，让图片在容器里完美呈现。

第一部分：object-fit——我是变形金刚，想变啥样就变啥样！

object-fit 属性定义了元素（通常是 <img> 或 <video>）的内容应该如何适应其容器。它就像一个变形金刚，可以把图片变成各种不同的形态，以适应容器的尺寸。

object-fit 属性有以下几个常用的取值：

值	描述
`fill`	默认值。图片会拉伸或压缩，以完全填充容器。这可能会导致图片变形。
`contain`	图片会被缩放，以完全包含在容器中。保持图片的宽高比。如果图片的宽高比与容器的宽高比不匹配，则会在容器中留下空白。
`cover`	图片会被缩放，以完全覆盖容器。保持图片的宽高比。如果图片的宽高比与容器的宽高比不匹配，图片可能会被裁剪，以完全覆盖容器。
`none`	图片不进行缩放或裁剪。如果图片大于容器，则会超出容器的边界。如果图片小于容器，则会以原始尺寸显示，并在容器中留下空白。
`scale-down`	效果取决于图片的尺寸和容器的尺寸。如果图片小于容器，则效果等同于 `none`。如果图片大于容器，则效果等同于 `contain`。这个属性实际上是 `none` 和 `contain` 之间的一个选择，它会选择最适合图片和容器尺寸的那个。简单来说，就是“能不变就不变，实在不行就缩放”。

代码示例：object-fit 的不同用法

咱们用一个简单的例子来演示 object-fit 的不同取值：

HTML:

<div class="container">
  <img src="your-image.jpg" alt="A cute cat">
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black; /* 方便观察 */
}

img {
  width: 100%;
  height: 100%;
}

现在，咱们分别给 img 标签加上不同的 object-fit 属性：

1. object-fit: fill;

img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 可能会变形 */
}

图片会被拉伸或压缩，以完全填充容器。如果图片的宽高比与容器的宽高比不匹配，图片会变形。

2. object-fit: contain;

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持宽高比，可能会有空白 */
}

图片会被缩放，以完全包含在容器中。保持图片的宽高比。如果图片的宽高比与容器的宽高比不匹配，则会在容器中留下空白。

3. object-fit: cover;

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持宽高比，可能会被裁剪 */
}

图片会被缩放，以完全覆盖容器。保持图片的宽高比。如果图片的宽高比与容器的宽高比不匹配，图片可能会被裁剪，以完全覆盖容器。

4. object-fit: none;

img {
  width: 100%;
  height: 100%;
  object-fit: none; /* 不缩放，可能会超出边界或留白 */
}

图片不进行缩放或裁剪。如果图片大于容器，则会超出容器的边界。如果图片小于容器，则会以原始尺寸显示，并在容器中留下空白。

5. object-fit: scale-down;

img {
  width: 100%;
  height: 100%;
  object-fit: scale-down; /* 智能缩放 */
}

如果图片小于容器，则效果等同于 none。如果图片大于容器，则效果等同于 contain。

第二部分：object-position——我想把脸放中间！

object-position 属性定义了元素的内容在容器中的对齐方式。只有在 object-fit 的值为 cover 或 contain 时，这个属性才有用。它就像一个定位器，可以把图片的关键部分放到你想要的位置。

object-position 属性可以使用百分比、像素值或关键字来设置。

百分比： 相对于容器的宽度和高度。例如，object-position: 50% 50%; 表示将图片居中对齐。
像素值： 相对于容器的左上角。例如，object-position: 10px 20px; 表示将图片的左上角放置在容器的 (10px, 20px) 处。
关键字： 使用预定义的关键字来指定对齐方式。常用的关键字有：top、bottom、left、right、center。可以组合使用关键字，例如 object-position: top left; 表示将图片对齐到容器的左上角。

代码示例：object-position 的不同用法

咱们继续用上面的例子，这次加上 object-position 属性：

HTML:

<div class="container">
  <img src="your-image.jpg" alt="A cute cat">
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black; /* 方便观察 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 先设置 object-fit 为 cover 或 contain */
}

现在，咱们分别给 img 标签加上不同的 object-position 属性：

1. object-position: center;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 居中对齐 */
}

图片在容器中居中对齐。

2. object-position: top left;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left; /* 左上角对齐 */
}

图片对齐到容器的左上角。

3. object-position: bottom right;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom right; /* 右下角对齐 */
}

图片对齐到容器的右下角。

4. object-position: 20% 30%;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 30%; /* 相对于容器的 20% 宽度和 30% 高度 */
}

图片的 (20%, 30%) 处对齐到容器的 (0, 0) 处。

5. object-position: 50px 100px;

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50px 100px; /* 相对于容器左上角偏移 50px 和 100px */
}

图片的左上角偏移容器左上角 50px 和 100px。

第三部分：实战演练——打造一个响应式图片列表

咱们来做一个稍微复杂一点的例子，用 object-fit 和 object-position 打造一个响应式图片列表。无论屏幕大小如何变化，图片都能完美呈现。

HTML:

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="gallery-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-around; /* 平均分配空间 */
}

.gallery-item {
  width: 300px; /* 固定宽度 */
  height: 200px; /* 固定高度 */
  margin: 10px;
  border: 1px solid #ccc;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 覆盖容器，保持宽高比 */
  object-position: center; /* 居中显示 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .gallery-item {
    width: 200px;
    height: 150px;
  }
}

@media (max-width: 480px) {
  .gallery-item {
    width: 150px;
    height: 100px;
  }
}

在这个例子中，我们使用了 flexbox 布局，让图片列表可以自动换行，并平均分配空间。 object-fit: cover; 保证图片覆盖容器，object-position: center; 保证图片居中显示。通过 media query，我们可以根据屏幕大小调整图片的大小，从而实现响应式效果。

第四部分：兼容性 considerations

object-fit 和 object-position 的兼容性还是不错的，大部分现代浏览器都支持。但是，对于一些老旧的浏览器，可能需要使用 polyfill 来提供支持。

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
Internet Explorer	不支持，需要使用 polyfill

第五部分：最佳实践和注意事项

选择合适的 object-fit 值： 根据具体的需求选择合适的 object-fit 值。如果需要保持宽高比，可以使用 contain 或 cover。如果不需要保持宽高比，可以使用 fill。如果希望图片不进行缩放或裁剪，可以使用 none。
配合 object-position 使用： 当 object-fit 的值为 cover 或 contain 时，可以使用 object-position 来调整图片的对齐方式，从而突出显示图片的关键部分。
注意性能问题： 频繁地改变 object-fit 和 object-position 的值可能会影响性能，尤其是在移动设备上。尽量避免在动画中使用这两个属性。
使用 srcset 属性： 对于响应式图片，可以使用 srcset 属性来提供不同尺寸的图片，从而提高加载速度和用户体验。
避免过度依赖： object-fit 和 object-position 只是 CSS 的一部分，不要过度依赖这两个属性。合理地使用 HTML 和 CSS，才能打造出优秀的网页。
测试和调试： 在不同的浏览器和设备上测试你的代码，确保图片能够正确显示。使用浏览器的开发者工具来调试 CSS，找出问题所在。

总结：

object-fit 和 object-position 是 CSS 中非常有用的属性，它们可以帮助你轻松地控制图片和视频在容器中的显示方式。掌握了这两个属性，你就可以打造出更加美观和专业的网页。

好了，今天的讲座就到这里。希望大家能够学有所获，并在实际项目中灵活运用 object-fit 和 object-position。感谢大家的观看！下次再见！

发表回复 取消回复

发表回复取消回复