如何使用 CSS object-fit 进行图片的缩放和裁剪

object-fit 属性用于指定可替换元素（例如 <img> 或 <video>）的内容应该如何适应容器的高度和宽度。

以下是 object-fit 的几个常用值：

1. fill：默认值。图片会被拉伸或压缩以填满容器。
2. contain：图片会保持其原始比例进行缩放，确保图片全部显示在容器内。
3. cover：图片会保持其原始比例进行缩放，确保容器被完全覆盖。
4. none：图片会以其原始大小显示，可能会超出容器的边界。
5. scale-down：类似于 none 或 contain，取决于两者之间哪一个会导致较小的图片。

CSS 示例代码：

/* 使图片填充整个容器，可能会变形 */
.img-fill {
  width: 100px;
  height: 100px;
  object-fit: fill;
}
 
/* 使图片缩放以保持容器内显示完整，不裁剪 */
.img-contain {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
 
/* 使图片缩放以覆盖整个容器，可能会裁剪 */
.img-cover {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
 
/* 使图片按其原始大小显示，不进行缩放 */
.img-none {
  width: 100px;
  height: 100px;
  object-fit: none;
}
 
/* 使图片缩放到不大于容器尺寸，取决于图片原始比例 */
.img-scale-down {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}

HTML 示例代码：

<img src="image.jpg" class="img-fill" alt="Fill">
<img src="image.jpg" class="img-contain" alt="Contain">
<img src="image.jpg" class="img-cover" alt="Cover">
<img src="image.jpg" class="img-none" alt="None">
<img src="image.jpg" class="img-scale-down" alt="Scale-down">

在这个例子中，所有的 <img> 标签都会被设置为 100px 宽和 100px 高，但是它们会根据 object-fit 的不同值应用不同的裁剪和缩放方法。