Как и каким способом лучше спозиционировать изображения?

Question

[Mak_Pet]

Мой вариант - https://makpet.github.io/zebra/
Код - https://github.com/MakPet/zebra

Нужно расположить картинки в блоках таким образом


Задал им абсолютное позиционирование, но на мобильном изображения "едут".



Может у кого-то есть идеи как зафиксировать изображение и масштабировать его одновременно?

Comments

[Rustam Bainazarov]

overflow: hidden на родителя (квадрат это ваш), чтобы отрезать то, что вылезает за пределы блока.

[Mak_Pet]

Рустам Байназаров, то что нужно, спасибо!

Answer 1

[Mak_Pet]

Рустам Байназаров: overflow: hidden на родителя (квадрат это ваш), чтобы отрезать то, что вылезает за пределы блока.

Answer 2

[Виктор]

Еще можно так
для блока обертки:

display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
   margin-right: -10px;

для блоков с картинками учитывая что их 4 штуки и расстояние между ними 20px:

width: calc(25% - 20px);
margin-left: 10px;
margin-right: 10px;

Картинки у тебя закрывают текст, это наверное не есть гуд. Лучше сделай их фоном.
Может где-то надо поправить. Но смысл такой))) Сам такой макет верстал когда-то на bootstrap 3)))