调整图像大小后，填充剩余空间以保持其长宽比

Question

我有2个div，其中包含一张图片（400x600），该图片的大小将与div保持原样。另一个面板应填充剩余空间。调整视口大小时，图像将按预期调整大小，但flex不会填充剩余空间。如何更改弹性框以填充剩余空间？此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>

Codepen：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;
}

应该工作。

Answer 2

您需要使用flex-grow

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

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

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

.panel1 {
  background-color: #b7d1d4;
}

.panel2 {
  flex-grow: 1;
  background-color: #a493c3;
}

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

Answer 3

用普通的height和width编写.img缩放CSS。将该值设置为100％，以使其占用整个panel-1（或任何容器）。

   body {
      background-color: #afafaf;
      margin: 0;
      padding: 0;
    }
    .container {
      background-color: #fff;
      height: 100vh;
      display: flex;
    }
    .img-scaleing {
    width: 100%;
      height: 100%;
    }
    .panel1 {
      background-color: #b7d1d4;
    }
    .panel2 {
      flex: 100%;
      background-color: #a493c3;
    }

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