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

Question

我有两个div，其中一个包含一个图像（400x600），将按比例调整大小以适应div。另一个面板应填充剩余空间。当视口调整大小时，图像按预期调整大小，但flexbox未填充剩余空间。如何更改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>

Codepen: https://codepen.io/anon/pen/oRmJZx

Codepen： https://codepen.io/anon/pen/oRmJZx

- qorsmond

---

比例会一直保持不变吗？（400x600） - Temani Afif

“但是flex不会填充剩余的空间”这句话确切地是什么意思？ - tao

@TemaniAfif 不好意思，图片的大小可以是任何尺寸。 - qorsmond

我的意思是，使用flex:100%的div=>panel2在图像缩小后无法填充剩余空间。 - qorsmond

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

应该可以工作。

- Philip

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>

- Rudi Urbanek

Answer 3

编写 .img-scaleing CSS，使用普通的 height 和 width。将其设置为 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>

- squillies

---

谢谢，但它应该保持纵横比。 - qorsmond