我有 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>
最佳答案
您的问题是您使用的是 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;
}
应该可以。
关于html - 调整图像大小后填充剩余空间,保持其纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56427333/