Как адаптировать блок с 4-мя картинками разного размера?

Question

[seminyuri]

Доброй ночи, ломаю голову как сделать блок адаптивным. Перерыл кучу материала, но из-за разности размера ничего не выходит. Подскажите пожалуйста как поступить. Код прилагаю

P.S. Пытался, что-то вроде этого провернуть, но как и с предыдущим - четно

.documents__image-wrap {
	position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.documents__image-wrap li {
  position: relative;
  display: inline-block;
  width: 50%;
  list-style-type: none;
}

.documents__image-wrap a {
  display: block;
}

Answer 1

[Shiki00]

Сначала добавьте в head вьюпорт:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

А Дальше в конец css кода добавьте:

@media only screen and (max-width: 768px) {
  
}

max-width в скобках означает, ниже какого кол-во пикселей будут показываться изменения введенные внутри медиа.
Например, если вы хотите ограничить размер дива, то делаете так:

@media only screen and (max-width: 768px) {
  div {
    max-width: 50%;
  }
}

А в идеале почитайте:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

[Пащук Илья]

Привет легко, способов много как вариант так смотреть, и здесь не нужно кучу медиа запросов писать, Можешь на grid сделать сетку тогда будет проще и можно будет внутри с картинкам красиво заморочиться.

К слову тебя в примере что скинул в очень много лишнего кода в стилях, в js и в семантике, учись писать чисто и следовать методологиям, это так прийми на заметку!