Css 背景图像填充容器左右的空间，保持纵横比

我正试图达到与格林先生相同的结果：

图像保持纵横比，并根据高度/宽度动态缩放。有两个单独的div/images，以避免加载不必要的大文件。我一直试图单独用CSS来实现这一点，但不确定是否有解决方案。在上面的页面上，似乎有一个功能正在发挥作用。有没有人知道如何做到这一点

我尝试了很多不同的CSS组合，例如：

 <div style="min-height: 100%; min-width: 31%;">
 <img style="height: auto; min-height: 100%; float: right; min-width: 31%; width: auto;" > src="/common/images/RightBackground.jpg">
 </div>

这是我一直在尝试的一个例子。有什么想法吗？？？试图通过谷歌找到这个几乎是不可能的。这是我最好的选择：

---

任何帮助都将不胜感激

尝试在你的div上使用广告css背景图像，背景尺寸：cover；例如，虽然两个答案在某些方面都有效，但它们更符合我已经得到的结果：。但是，当您缩小比例时，高度和宽度会超出其限制。理想情况下，如果我缩小页面，使容器的左/右位置为200x200，则侧图像将缩小以适合。乍一看似乎很简单，但我觉得更复杂。谢谢大家。以上CSS位于btm附近[id=carTheme]