Сценарий:
- У меня есть фоновое изображение в качестве «сцены».
У меня есть 2 объекта (в настоящее время) поверх фонового изображения.
У меня задано фоновое изображение как «содержать», чтобы оно уменьшало ширину и высоту в зависимости от размера окна (чтобы я не получал искажения).
Todo:
- Я хочу, чтобы объекты находились в одинаковом положении и соответственно масштабировались, когда фоновое изображение уменьшается.
Вот фрагмент моего кода из codepen для описания того, что я использую в настоящее время.
body .main {
flex: 1;
background: url("https://i.imgur.com/AsapsWY.png");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
position: relative;
min-width: 600px;
height: 100%;
}
body .main--flower img {
position: absolute;
bottom: 200px;
right: 200px;
max-width: 100px;
}
body .main--bin img {
position: absolute;
top: 400px;
left: 200px;
max-width: 100px;
}
Вот ручка, которая поможет объяснить, что я имею в виду.
Я создаю эту игру, чтобы она была чем-то вроде игры 'escape room'.