如何缩放自动图像高度使用calc CSS

Question

我正在尝试使用Css中的calc函数计算出比例图像高度。我试过几种方式，但遗憾的是无济于事。你有什么想法吗？

.wrap{
  width:500px;
  margin:0 auto;
  overflow:hidden; 
}

.panel{
  width:100%;
}
.image{
  float:left;
  width:40%;
  height:calc(width / 0.2);
  /* not work
  height:calc(100% / 0.2);
  height:calc(100% / 0.02 );
  height:calc(100% / 2);
  
  */
  background-color:#eee;
  background-repeat:no-repeat;
  background-size:cover;
}

.content{
  float:left;
  color:#000;
  font-weight:bold;
}

<div class="wrap">
  <div class="panel">
      <div class="image" style="background-image:url(https://iv.pl/images/35176551489174265644.jpg);"></div>
      <div class="content">
          hello
      </div>
  </div>
</div>