调整 2:1 图像的大小以放入 1:1 div

Question

只想让所有产品图片使用相同的1:1响应区域。问题是，如果图像是 2:1，它使用的 space 多于预期 (1:1)。如何使用 css 调整它的大小以显示这样？（第一个例子）

当前设置：

max-width: 100%;
width: 100%;
height: auto;
max-height: 100%;
margin: 0 auto;

Answer 1

您可以使用 object-fit:cover; 覆盖图像所在的整个容器。在下面的示例中，我加载了 200x100 像素的图像，并将其包含在 100x100 像素的区域中。

#product {
  width:100px;
  height:100px;
}

#product img {
  object-fit:cover;
  width:100%;
  height:100%;
}

<div id="product">
  <img src="http://placehold.it/200x100&text=productimage">
</div>

Resize a 2:1 image to put into a 1:1 div