Как сделать блок с высотой фоновой картинки?

Question

[myskypesla]

Есть такой лэндинг, конкретно блок с машиной:

Кнопки в этом блоке, при уменьшении браузера должны быть на 1-ом и том же расстоянии от машины, в зависимости от ширины браузера.

Задача: нужно сделать этот блок резиновым, так чтобы картинка и сам блок пропорционально уменьшались по ширине и высоте в зависимости от ширины браузера, как будто мы просто вставили картинку и сделали ей width: 100%, но картинка должна быть фоном для блока.

Проблема в том, что если ставишь фоном картинку или же ставишь ей position: absolute, то блок не видит по-сути жту картинку и не становиться её высоты. А position: relativel; означает, что нужно делать все остальные элементы с абсолютным позиционированием, что в данной задаче нормально, а если бы этих элементов было бы 100+?

Answer 1

[Максим Тимофеев]

Вы не с той стороны заходите. Я думаю вам нужно определиться с размерами блоков и потом заниматься резиновостью фона, а не блока.
Как правило для этого используют background-size, вот доки:
htmlbook.ru/css/background-SIZE
Делаем блок c размерами и маштабируем фон, допустим

.myblock {
height: 20vh;
width:30vw;
background-size: cover;
}

ну а background-url вы видимо прописываете в html

Answer 2

[Ankhena]

Картинки одинакового размера?
Используйте calc и пропорции для расчета высоты.