Flexbox图像宽高比

Question

让我们考虑一些display: flex的容器。其中有一些元素。

所有元素都具有相同的高度，因为align-items的默认值为stretch。

其中一个元素是图像。

是否可以保留此图像的宽高比？

所以我有这个：

＆＃13;

＆＃13;

.container {
  display: flex;
}

.description {
  height: 200px;
  background: yellow;
}

＆＃13;

<div class="container">
  <img class="image" src="http://placehold.it/200x100" />
  <div class="description">
    Some text of 200px height
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望在不指定容器高度的情况下实现以下结果

＆＃13;

＆＃13;

.container {
  display: flex;
  
  height: 200px;
}

.image {
  height: 100%;
}

.description {
  height: 200px;
  background: yellow;
}

＆＃13;

<div class="container">
  <img class="image" src="http://placehold.it/200x100"/>
  <div class="description">
    Some text of 200px height
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;