object-fit: cover;在保持图片原始宽高比的前提下，让图片完全填满容器，超出部分会被裁剪

object-fit: cover是 CSS 中用于控制替换元素（如<img>、<video>）如何适应其容器尺寸的一个关键属性值。它的核心作用是‌在保持图片原始宽高比的前提下，让图片完全填满容器，超出部分会被裁剪‌。

以下是关于object-fit: cover的详细解析、使用场景及注意事项：

1. 核心工作原理

保持比例‌：图片不会发生拉伸或挤压变形，始终维持原始的长宽比。

填满容器‌：图片会进行等比缩放，直到其‌短边‌刚好填满容器的对应方向。

自动裁剪‌：由于为了填满容器，图片的长边通常会超出容器边界，超出的部分会被隐藏（裁剪）。默认情况下，裁剪是以图片中心为基准进行的。

2. 基本用法

要使object-fit: cover生效，必须满足两个条件：

作用于替换元素（如<img>或<video>）。

该元素及其父容器必须有‌明确的宽度和高度‌。

.image-container img {
	width: 200px;
	height: 300px;
	object-fit: cover;
}