逆本征比-根据div标签上的高度设置宽度

Question

我需要以原始宽高比渲染图像，只知道可用的宽度，而不知道高度。但诀窍在于，我需要将图片用作div上的背景，因此我没有使用实际的img标签。使用img标签，很容易。这是布局的示例：

.image {
  background-image: url("http://lorempixel.com/1920/960/");
  height: 100%;
  float: left;
  margin-right: 20px;
}

.fixed-aspect-ratio-container {

}
.panel {
  height: 14rem;
  background-color: lightgrey;
}

<div class="panel">
      <img src="http://lorempixel.com/1920/960/" class="image"></img>
  <div class="panel-content">
    <h2>Panel title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quo quis quas delectus explicabo, ipsam necessitatibus obcaecati excepturi laborum nesciunt, consectetur quae dolorum. Architecto aspernatur, quas voluptas laboriosam optio nam.</p>
  </div>
</div>

但是，如果不使用javascript来计算和设置高度，则根据高度（我知道纵横比）来设置正确的宽度似乎很难。

我知道“ padding bottom hack”-使用零高度和padding-bottom作为元素宽度的百分比来设置固有比率-这将让我根据已知的宽度和高度来设置高度本征比，但我需要做相反的事情。我需要知道高度和本征比来设置宽度。

这可以在CSS中实现吗？

这是我所能接近的结局（由于某种原因，它不能正确显示在stackoverflow上，但是您可以在codepen上看到结果：https://codepen.io/webconsult/pen/Rzdpdv）

.image {
  background-image: url("http://lorempixel.com/1920/960/");
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.fixed-aspect-ratio-container {
  float: left;
  margin-right: 20px;
  position: relative;
  height: 100%;
  // This should be set pased on the height of .panel
  width: 28rem;
}
.panel {
  height: 14rem;
  background-color: lightgrey;
}

<div class="panel">
  <div class="fixed-aspect-ratio-container">
    <div class="image"></div>
  </div>
  <div class="panel-content">
    <h2>Panel title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quo quis quas delectus explicabo, ipsam necessitatibus obcaecati excepturi laborum nesciunt, consectetur quae dolorum. Architecto aspernatur, quas voluptas laboriosam optio nam.</p>
  </div>
</div>