Гриды. Как сделать, чтобы картинки были на одном уровне между друг другом и даже при разных разрешениях экрана?

Question

[Максим Иванов]

htmlpreview.github.io/?https://github.com/Roderen/...

Вот как нужно
Вот как сейчас

Может подскажите что использовать (мб у гридов что-то есть). grid-gap и магрин и паддинг не подходит, так как при смене разрешения всё опять криво.
И не только здесь, а ещё и снизу последний ряд.

Comments

[Ankhena]

Либо изначально подготовьте картинки либо используйте object-fit. Гриды тут не при чем.

Answer 1

[NotLogo]

Для изображений добавьте object-fit: cover, height: 100%, vertical-align: middle;

Пример с вашей версткой https://codepen.io/NotLogo/pen/Bazqrgd

Comments

[Максим Иванов]

И ещё можно вопрос:
Нормально ли я делаю, что для больших экранов картинки будут такими - https://imgur.com/a/CmNQktO
А меню тоже сделать больше конечно.

[NotLogo]

У меня нет изображения по вашей ссылке скриншот

[Максим Иванов]

https://imgur.com/a/E1HnJfw
Извиняюсь. Вот я отдалил колёсиком и нужно ли вообще делать больше картинки и текст с помощью медиа и я не про маленькие экраны, а для больших 1920, 2000 и так далее.

[NotLogo]

Если даже остановится на таком варианте (ширина контента страницы без ограничений max-width, только горизантальный padding) то меню категорий не обязательно увеличивать, так как меню отцентровано.

Но я бы обязательно делал для такого варианта responsive image так уже в вашеме примере скриншот размер изображение при ширине экрана 2560 px меньше размера блока, из-за чего изображения размыты. А для страницы портфолио качество фото очень важно.

Это первостепенный вопрос, сможете ли вы подготовить фото для разных брейкпойнтов (вручную нарезать для верстки или делать автоматический crop на cms / движке на который будет интегрироваться верстка)

Если по каким либо причинам вы не сможете обрезать фото для разной ширины экрана, то я бы ограничивал ширину контента страницы, чтобы размер фотографий для максимальной ширины не был слишком большим для адаптива и не увеличивал скорость загрузки сайта, особенно при подключении через 3g, 4g

Answer 2

[GunAlv]

Задайте картинкам display: block;
Но это едва ли решение и в комментариях вам правильно ответили