html - 调整图像大小后填充剩余空间，保持其纵横比

Question

我有 2 个 div，其中一个包含一个图像 (400x600)，该图像的大小将根据 div 保持其纵横比。另一个面板应填充剩余空间。当视口(viewport)调整大小时，图像会按预期调整大小，但 flex 不会填充剩余空间。如何更改 flexbox 以填充剩余空间？这个 gif 显示了问题:

这是我要做的，但我就是想不通如何在图像按比例缩小时填充更大的 div。基本上，我需要 panel-2 来填充图像缩小时产生的空白。这样两个面板之间就没有空间了。

body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
}

.container {
  background-color: #fff;
  height: 100vh;
  display: flex;
}

.img-scaleing {
  max-width: 100%;
  max-height: 100%;
}

.panel1 {
  background-color: #b7d1d4;
}

.panel2 {
  flex: 100%;
  background-color: #a493c3;
}

<div class="container">
  <div class="panel1">
    <img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-scaleing" />
  </div>
  <div class="panel2"></div>
</div>

代码笔:https://codepen.io/anon/pen/oRmJZx

Answer 1

您的问题是您使用的是 vh 而不是设置 HTML 文档的高度

 html{
  height:100%;
}
body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  background-color: #fff;
  height: 100%;
  display: flex;
}

.img-scaleing {
  max-height: 100%;
}

.panel1 {
  background-color: #b7d1d4;
  height:100%;
}

.panel2 {
  flex: 100%;
  background-color: #a493c3;
}

应该可以。