Как верстать адаптивный элемент из нескольких картинок?

Question

[Кирилл]

Учусь верстать по макету. Инфы о том, как должен вести себя элемент нет, только веб шаблон.
В макете есть несколько блоков, состоящих из картинок с прозрачным фоном, под которые маской накладывается фоновый цвет:


Хватило навыков только на то, чтобы сделать контейнер + блок каждого элемента и спозиционировать их абсолютно, относительно контейнера. В широкоформатном разрешении все ок, но при адаптиве все начинает ездить по плохо понятной мне логике.

Как принято оформлять подобные блоки? Может есть примеры живой реализации? Пытался гуглить всякие лендосы, но не нашел...
P.S. на данном этапе учусь верстать на чистом HTML+CSS

Код блока

Comments

[Вадим]

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

В идеале залить на codepen и поделиться тут в вопросе ссылкой

[Ankhena]

Самый простой вариант, если у этих картинок нет никакой функциональной нагрузки, а её тут не видно- слить в одну (вместе с точками), поставить куда нужно псевдоэлементом или фоном и расслабится.

Другой вариант: множественные фоны. Точки - радиальными градиентами (или SVG).

Если хочется потренироваться с позиционированием или гридами - делайте отдельными элементами и позиционируйте.

В широкоформатном разрешении все ок, но при адаптиве все начинает ездить по плохо понятной мне логике.

Плохо понятная логика основывается на том, как и в каких единицах вы задали размеры и координаты.

[Кирилл]

Вадим, спасибо, добавил ссылку. Я, если честно, не думал о код-ревью, скорее о том, что мне примеров накидают))

Самый простой вариант, если у этих картинок нет никакой функциональной нагрузки, а её тут не видно- слить в одну (вместе с точками), поставить куда нужно псевдоэлементом или фоном и расслабится.

Да, был соблазн сделать именно так, но это не показалось разумным с точки зрения обучения)

[Вадим]

Кирилл, Тут вопрос не в код ревью, а в наглядной демонстрации происходящего и оптимальном времени нахождения причины

Answer 1

[Antony Bark]

1. Для адаптива использовать относительные величины: %, vw\vh
2. Сверстать блок с картинками на SVG