如何不失真地用图像填充盒子

当您使用 HTML 的 <img> 元素将图像添加到页面时，图像将保持图像文件的大小和 纵横比，或者任何 HTML width 或 height 属性的大小。有时您希望图像完全填充放置它的框。在这种情况下，您首先需要确定如果图像的纵横比与容器不匹配会发生什么。

1. 图像应完全填充框，保持纵横比，并裁剪任何超出框大小的侧边。
2. 图像应适合框内，并在过小的侧边显示背景。
3. 图像应填充框并拉伸，这可能意味着它以错误的纵横比显示。

object-fit 属性使每种方法都成为可能。在下面的示例中，您可以看到使用同一图像时 object-fit 的不同值是如何工作的。选择最适合您设计的方案。