使用宽高比填充图像的div

Question

是否有可能用图像 填充 div，使得至少一个图像尺寸为100％，另一个尺寸与div相比更宽或相等，同时还要考虑图像的长宽比。

一个示例可以使用这些类wide，tall如下所示：

<div class="tall">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Klaproos.jpg/266px-Klaproos.jpg"/>
</div>

<div class="wide">
  <img src="https://groenevrijdag.files.wordpress.com/2013/11/klaproos2.jpg"/>
</div>



div {
  width: 400px; height: 400px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
}
div.tall img { width: 100%;  margin-top: -50%; }
div.wide img { height: 100%; margin-left: -50%; }

我正在寻找一种纯HTML +
CSS解决方案，该解决方案适用于响应矩形（不一定是正方形）的div。由于这个特殊原因，Javascript会很痛苦，因为需要确定每次调整大小时宽度或高度是否应为100％。服务器端甚至都不是一个选择。

为此是否存在纯HTML + CSS解决方案？

编辑
从一开始就应该对此有所了解，对此感到遗憾：(我不是在寻找背景图像解决方案，因为它不允许图像的base64-inhtml表示。此外，我认为背景图像在语义上是不同的来自<img>。

Answer 1

考虑使用CSS object-fit属性。

5.5。调整对象大小：object-fit 属性

该object-fit属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

这是两个值：

cover

确定替换内容的大小，以在填充元素的整个内容框时保持其长宽比。

contain

替换后的内容的大小可保持其纵横比，同时适合元素的内容框。

因此，cover图像将保留其纵横比并覆盖所有可用空间。当然，这意味着很多图像可能会在屏幕外裁剪。

随着contain纵横比也保持，但图像进行缩放以适应箱内。这意味着图像的左右两侧或顶部和底部可能会有空白。