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

當您使用 HTML 的 <img> 元素將影像新增到頁面時，影像將保持影像檔案的大小和 縱橫比，或者任何 HTML width 或 height 屬性的大小。有時您希望影像完全填充放置它的框。在這種情況下，您首先需要確定如果影像的縱橫比與容器不匹配會發生什麼。

1. 影像應完全填充框，保持縱橫比，並裁剪任何超出框大小的側邊。
2. 影像應適合框內，並在過小的側邊顯示背景。
3. 影像應填充框並拉伸，這可能意味著它以錯誤的縱橫比顯示。

object-fit 屬性使每種方法都成為可能。在下面的示例中，您可以看到使用同一影像時 object-fit 的不同值是如何工作的。選擇最適合您設計的方案。