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

Question

只想让所有产品图像使用相同的1：1响应区域。问题是，如果图像为2：1，则它使用的空间比预期的（1：1）多。 如何使用CSS调整其大小以使其显示为？ （第一个示例）

当前设置：

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

Answer 1

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

请注意，IE不支持此功能：https://caniuse.com/#search=object-fit

#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>