如何缩放多个图像以填充区域答案

【问题标题】：How to scale a number of images to fill area如何缩放多个图像以填充区域
【发布时间】：2019-09-25 02:58:41
【问题描述】：

我正在尝试用未知数量的图像（最多 10 个）填充某个固定大小的网页区域，从而在不溢出该区域的情况下最大化图像的大小。为了对移动设备友好，我希望它无需滚动即可在横向和纵向模式下工作。

我一直在尝试使用弹性框来包裹图像，但是它们并没有按比例缩小并最终溢出该区域。如果我使用非环绕弹性框，图像会在横向模式下缩放，而不是纵向。我觉得应该有一个很好的，简单的解决方案。有什么想法吗？

更新：

这是我目前所掌握的代码的精髓。我一直在尝试很多不同的东西，但这是最干净的。

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 张图片

【问题讨论】：

可能是个愚蠢的建议，但您是否尝试过使用vw 和vh 来设置图片的宽度和高度？
您已经开发的一些代码将有助于您了解您需要在这里实现什么。你在这里谈论的图像的尺寸如何？所有图像都应该以相同的大小显示吗？
到目前为止你有什么尝试？您的图像设置为响应式 (width: 100%; height: auto) 吗？ Flexbox 可以很好地解决这类问题
图像是否具有相同的宽度和高度，或者每个图像都有自己的分辨率？ flexbox + vw +vh 应该可以解决问题
用代码和线框更新了问题。希望能解决问题。

标签： css image mobile flexbox

【解决方案1】：

我认为您需要在这里考虑flex 属性，它是flex-grow、flex-shrink 和flex-basis 属性的简写版本。看看这是不是你要找的。p>

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>

【讨论】：

感谢您的回答！它给了我一些想法，但最后，我认为你的建议缺少一些关键点。横向模式下的 max-width: 30% 会阻止 2x2 场景的图像缩放到它们的最大尺寸，同样，.items 的固定高度：150px（和 100px）也不允许，比如说，一组单个图像放大到容器的整个宽度和高度。这是一个难题，这就是为什么我不得不在这里问。
我使用固定的height 来演示flex 的行为，你可以使用任何你想要的大小，根本不需要修复height。 flex会根据里面的元素展开成大小。
顺便说一下，我在这里使用margin 属性来显示瓷砖的分隔，因为我们不能使用width 和flex-grow 属性的确切尺寸。如果没有margin，只需使用 100/（图像计数）的值。我更新了答案，看看你在这里评论的问题是否解决了这个问题
是的，flex 会扩展。但关键是要为该区域设置一个最大尺寸，并让 flexbox 的内容缩小而不是溢出，同时仍然让图像尽可能大。
这里说的是固定大小的区域吗？