Как заставить мои относительно расположенные элементы «прилипать» к конкретному, но адаптивному фоновому дизайну, не нар ⇐ CSS

[Anonymous]

TL;DR. У меня есть элементы, которые реагируют на vw, но предназначены для масштабирования вместе с фоновым изображением определенным образом, при этом они всегда «видятся» в одном и том же положении относительно фонового изображения.TL;DR. >

Я пытаюсь воспроизвести определенный макет, который обычно выглядит так:
[img]https://images. Squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1614729735782-4S8QPYRJOKU3ZTF4E3F9/face-scan2.gif[/img]

Хотя я не настолько опытен, как хотелось бы, и я Я возвращаюсь ржавый, мне нужно немного подсказок, поскольку я пытаюсь сделать это отзывчивым.
Если вы внимательно посмотрите, вы заметите, что линии перемещаются по точкам в фон и обычно специально привязаны к точкам на заднем плане. Я пытаюсь сделать то же самое, и в целом мне удалось воспроизвести общий макет: рамка, точки и круговые шестерни — в формате .SVG, а все остальное — в CSS.
Вот что На данный момент я добился своих результатов:

Обратите внимание, как вертикальные линии выровнены по точкам.
И смещены, когда область просмотра меньше, в противном случае:
[img]https:/ /i.stack.imgur.com/YIIAE.png[/img]

Родительский элемент расположен относительно и содержит фоновое изображение.

Код: Выделить всё

.access-terminal-frame {
background-image: url('resources/ui-elements/access-terminal-frame.svg');
background-size: 158vh;
background-position: center;
height: 90vh; width: 100vw;
margin: 5vh 0;
}

Хотя дочерние элементы обычно выглядят как...

Код: Выделить всё

.access-terminal-dual-lines {
background: var(--terminal-border-color);
height: 100%; width: 1px;

position: absolute;
top: 0vh; left: 14.5vw;
}

.access-terminal-dual-lines::after {
content: "";
background: var(--terminal-border-color);
height: 100%; width: 1px;

position: absolute;
top: 0; left: 1vw;
}

.access-terminal-dual-lines.second-pair {
left: 83.45vw;
}

.access-terminal-line-divider {
background: var(--terminal-border-color);
height: 100%; width: 1px;

position: absolute;
top: 0vh; left: 22.20vw;
}

Вы можете сказать, что на самом деле я был не самым умным (по крайней мере, я так думаю), поскольку мне приходилось создавать десятичные единицы и очень точно масштабировать их, используя множество проб и ошибок. Обычно я понимаю это как красный флаг, но не знаю, как еще это сделать.
Мой макет выдерживает увеличение и уменьшение масштаба, но как только ширина области просмотра изменения: линии не совпадают с точками. Я впервые пробую правильный адаптивный веб-дизайн и впервые пробую такой дизайн, поэтому будьте осторожны.

Подробнее здесь: https://stackoverflow.com/questions/782 ... t-responsi