Я пытаюсь заполнить область веб-страницы определенного фиксированного размера неизвестным количеством изображений (максимум 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 изображения
