html - 如何仅使用 CSS/HTML 拉伸(stretch)/缩小任何尺寸的图像以最适合正方形？

Question

我有一个完美的正方形 DIV - 500 x 500 像素。

我将在该 DIV 中显示未知大小的图像...有些图像是水平的，有些是垂直的；有些大于 500px 高或宽，有些小于 500px 高或宽。我不控制图像大小。

我怎样才能将放置在 DIV 中的任何图像展开或缩小以最好地填充方框？我的目标是图像的一个轴始终为 500px，另一个轴调整大小以适合。 (这意味着如果图像不是完全正方形，垂直图像的图像两侧总是会有空白区域，水平图像的图像上方和下方总是会有空白区域。没关系。)

我知道我可以使用 JS 或服务器端的东西对图像大小进行一些数学运算，并以这种方式动态计算新的尺寸，但我正在寻找一种仅使用 CSS 的解决方案。 flexboxes 可以做到这一点吗？

Answer 1

自 CSS object-fit属性仍然得到广泛支持，并且你有一个固定的容器，为什么不使用 background-image:.../background-size:contain

.image {
  height: 500px;
  width: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid red;                  /* to mark each box in this sample */
}

.nr1 {
  background-image: url(http://lorempixel.com/400/600/animals/1);
}
.nr2 {
  background-image: url(http://lorempixel.com/600/400/animals/3);
}

<div class="image nr1">
</div>

<div class="image nr2">
</div>