Масштабирование размера/размеров кнопок синхронно с размером фона на моей веб-странице. ⇐ CSS

[Anonymous]

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

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

    body {
background-image: url("Renders/Room2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 100vh;
width: auto;
}

:root {
--scale: 100;  /* Define your desired scale value */
--button-scale: 100;  /* Define your desired button scale value */
--button-scale2: 100;  /* Define your desired button scale2 value */
--vh: 1vh;
--wh: 1vw;
}

.buttons1 {
margin-left: auto;
margin-right: auto;
/* min-height: 100%; */
/* width: 50%; */
position: fixed;
top: 15rem;
min-height: calc(var(--vh) * 40);
width: calc(var(--vw) * 30);
aspect-ratio: 16/9;
}

.buttons2 {
display: inline-grid;
grid-template-columns: 1fr 1fr;
margin-left: auto;
margin-right: auto;
/* min-height: 100%;
width: 50%; */
position: fixed;
top: 15rem;
left: 40rem;
min-height: calc(var(--vh) * 40);
width: calc(var(--vw) * 30);
aspect-ratio: 16/9;
}

Мне хотелось бы, чтобы веб-страница была максимально гибкой по размеру и ориентации экрана, и я безуспешно пытался найти решение. Я также хотел бы, чтобы горизонтальная ширина окна перестала уменьшаться до 800 пикселей. Кроме того, я новичок в миксинах и Bootstrap, но не знаю, помогут ли они в этом или в правильном способе выполнения того, что я пытаюсь. Я добавил их в папку своего проекта, чтобы при необходимости использовать их.

Подробнее здесь: https://stackoverflow.com/questions/791 ... my-webpage