是否有可能用图像 填充 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>。