У меня есть симпатичный столик с 4 элементами, которые содержат изображения.
Изображения обычно загружаются пользователями, поэтому я не могу точно контролировать размер изображения.
То, что я пытаюсь сделать, - это создать макет 2 x 2, размер которого изменяется в соответствии с размером экрана пользователя, и каждому блоку макета присваивается соотношение сторон 16: 9.
Это очень хорошо работает при настройке ширины окна, но если пользователь регулирует высоту, элементы переполняются, а не регулируются по высоте, чтобы соответствовать экрану пользователя.
Вы можете увидеть пример здесь, и если вы отрегулируете свой экран, то поведение по горизонтали - это то, что я ищу, но настройка по вертикали скрывает изображения при меньших размерах окна.
https://codepen.io/anon/pen/zaXEOL
.outer-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 70vh;
max-width: 70vw;
overflow: hidden;
}
.holder {
border: 1px solid red;
max-width: 46%;
max-height: 46%;
margin: 1%;
display: flex;
align-items: center;
justify-content: center;
height: 0;
padding-top: 26%;
width: 100%;
position: relative;
}
img {
object-fit: contain;
max-height: 100%;
top: 0;
max-width: 100%;
width: 100%;
height: 100%
<div class="outer-grid">
<div class="holder">
<img src="http://fillmurray.com/200/300"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/300/300"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/300/200"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/250/300"/>
</div>
</div>
Я использую CSS довольно просто
.outer-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 1rem;
max-height: 70vh;
max-width: 70vw;
overflow: hidden;
}
.holder {
border: 1px solid red;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 0;
padding-top: 56%;
position: relative;
}
img {
position: absolute;
display: block;
top: 0;
max-height: 100%;
max-width: 100%;
}