我试图用未知数量的图像(最多 10 张)填充某个固定大小的网页区域，在不溢出该区域的情况下最大化图像的大小。为了移动友好，我希望它在横向和纵向模式下都可以工作，而无需滚动。
我一直在尝试使用 flexboxes 让图像环绕，但它们并没有按比例缩小并最终溢出该区域。如果我使用非环绕式 flexbox，图像会在横向模式下缩放，但不会在纵向模式下缩放。我觉得应该有一个很好的、简单的解决方案。有什么想法吗？
更新:
这是我目前所获得的代码的本质。我一直在尝试很多不同的东西，但这是最干净的。
html {
height: 100%;
}
body {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
.above {
margin-bottom: 20px;
font-size: larger;
background-color: lightgrey;
}
.middle {
flex-grow: 1;
max-height: 100%;
}
.below {
margin-top: 20px;
background-color: lightgrey;
}
img {
border: 5px solid transparent;
height: 100%;
}
.images {
flex-direction: row;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.image {
margin: 5px;
}<html>
<body>
<div class="container">
<div class="above">
Some text about the images
</div>
<div class="middle">
<div class="images">
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
</div>
</div>
<div class="below">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>重点是尽量让图像完全位于称为“中间”的 div 内，但要尽可能放大。这里有一些线框图。
横向，10 张图片:
肖像，10 张图片:
人像，4 张图片
最佳答案
我认为你需要考虑flex这里的属性，它是 flex-grow 的简写版本, flex-shrink , 和 flex-basis特性。看看这是否是您要找的。
html,body{
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
}
.container{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.row{
display: flex;
width: 100%;
flex-direction: row;
}
.col{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.item{
display: flex;
max-width: 100%;
height: 150px;
background-color: #222;
margin: 1%;
flex: 1 1 15%;
}
@media only screen and (max-width: 600px) {
.item {
height: 100px;
flex: 1 1 45%;
max-width: 100%;
}
}<div class="container">
<div class="row ">
<div class="col">
<h1>some text about images</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="row">
<div class="col">
<p>Some other elements</p>
</div>
</div>
</div>关于css - 如何缩放多个图像以填充区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56022728/