CSS 中 object-fit 的 cover 和 contain

前言：object-fit 属性用于指定可替换元素（如`<img>`、`<video>`等）如何适应其容器。

一、视觉效果

1. object-fit: cover

此值会使被替换元素完全覆盖容器，同时保持其宽高比。这意味着元素可能会被裁剪以适应容器的尺寸。

2. object-fit: contain

此值会使被替换元素在保持其宽高比的情况下完全显示在容器内。这意味着容器可能会有空白区域，因为元素不会被拉伸或裁剪以填满整个容器。

二、应用场景

1. object-fit: cover

当你希望确保图片或视频完全覆盖容器，并且不介意部分内容被裁剪时，可以使用`cover`。例如，在全屏背景图像或响应式设计中，需要确保图像始终填满容器，即使这意味着裁剪一部分图像。

常用于需要强烈视觉冲击力的页面布局，或者当图片的内容不是关键信息，而整体的视觉效果更为重要时。

2. object-fit: contain

当你希望确保图片或视频完整显示，不被裁剪，同时又能适应容器的大小时，可以使用`contain`。例如，在展示图片库或需要确保用户能够看到完整图像内容的情况下，使用`contain`可以保证图像的完整性。

常用于需要展示重要信息的图片或视频，或者当保持图像的原始比例和内容完整性至关重要时。