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

Question

我有 2 个 div\xe2\x80\x99s，其中一个包含一张图像（400x600），该图像的大小将根据 div 保持其纵横比。另一个面板应填充剩余空间。当视口调整大小时，图像会按预期调整大小，但 Flex 不会填充剩余空间。如何更改弹性盒以填充剩余空间？这张 gif 显示了问题：

\n\n

\n\n

这就是我要做的，但我只是不知道当图像缩小时如何让更大的 div 填充。基本上，我需要 panel-2 来填充图像缩小时产生的空白。这样两个面板之间就没有空间。

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n

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

应该管用。