@DarkMiike

Как расположить несколько изображений в ряд по ширине экрана?

Как расположить три изображения в один ряд по горизонтали как в макете, чтобы они были по ширине всего экрана, масштабировались при увеличении/уменьшении окна браузера, и при это не обрезались? Только с помощью html/css.
Изначально изображения довольно высокого разрешения.

5e76820e0e694041190771.jpeg
  • Вопрос задан
  • 3478 просмотров
Решения вопроса 4
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Три блока по 33.3% шириной. Родителю флекс.
Высота в пропорциях к ширине https://jsfiddle.net/Ankhena/cLhxv7eq/ (в примере квадрат).
Если картинки будут сразу нужных пропорций, то предыдущий пункт лишний.
Если же нет, то еще object-fit.
И не забудьте про адаптивность картинок с помощью тега picture.
Ответ написан
abdelyazy
@abdelyazy
К родительскому блоку присвой
display: flex;
flex-wrap: wrap;
Ну и сами картинки можешь подогнать с помощью background-size.
Ответ написан
Комментировать
@AnderZero
Думаю, через display: flex можно попробовать, но я не профессионал по этой теме, поэтому смотри на другие ответы.
Ответ написан
Комментировать
@AleksRap
Флексы и background-size: contain
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы