Как решить проблему со смещением макета и подогнать контейнер под размер картинки?

Question

[Алексей]

Доброго времени суток. Помогите с решением двух проблем, смещение макета при загрузке и не могу никак контейнер в котором находится картинка подогнать под размер, по высоте получается контейнер чуть больше.

На картинке ниже отступ, который надо убрать.


Тестовый сайт https://tatoo-hub.ru/

Comments

[Ankhena]

Возьмите masonry-скрипт без участия гридов.

Answer 1

[smilingcheater]

Потому что у вас высота ячеек привязана к гриду, и округление идёт вы большую сторону. Смотрите метод resizeMasonryItem в файле скриптов темы.

Answer 2

[Виктор Майоров]

Если не страшно, что по высоте/ширине какие-то картинки не много обрежуться, то можете сделать так:

.post-box__thumbnail {
  position: relative;
}
.post-box__thumbnail > img {
    top: 0;
    left: 0;
    object-fit: cover;
    position: absolute;
    vertical-align: middle;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

Тем самым изображения займут все свободное пространство