Ну если говорить про расчет этих самых viewports
то я находил подобную формулу
Размер элемента в макете / Ширина или высота макета * 100.
vw это view width
vh это view height
Смею предположить, что стоит попробовать в процентах задавать такое.
Скажем header и footer по 20 процентов а 60 процентов нужный вам контейнер. Такое?
https://jsfiddle.net/55anqpg3/12/
Посмотрите.
Суть заключается в том, что вам нужен div, в него поместить другие div, которые в свою очередь вы через css делаете круглыми. Ну а дальше уже можете поместить картинки внутри окружностей.
у каждого div который хотите поставить друг на друга свойство
position:relative
и смотрите в сторону z-index с его помощью можно накладывать картинки одну на одну. Порядок только проставить.
