Поддерживать соотношение сторон div в%, зная высоту и ширину в px

Question

Я добавляю фоновое изображение в div.

<div class="image" style="background-image: url(...)>
</div>

CSS динамический.Это может быть, например ...

.image {
   width: 65%;
   height: ? (trying to figure out the value)
}

Я пытаюсь вычислить высоту в js, чтобы сохранить соотношение сторон изображения.

Как установить правильное значение высоты в CSS на основе ширины в CSS, заданной в%, чтобы сохранить соотношение размеров изображения, если я знаю ширину и высоту исходного изображения в пикселях?

Проблема будет выглядеть примерно так:

Ширина изображения = 300px

Высота изображения = 520px

Ширина в CSS = 65%

Высота в CSS для поддержания соотношения сторон =?

Я не могу использовать ширину родительского контейнера для вычислений.

Я не могу получить динамическую ширину изображения в пикселях с помощью offsetWidth.

Я не могу просто использовать изображение в div.

Answer 1

Вам не нужно знать исходные размеры изображения.Установка одного размера для изображения автоматически устанавливает другое так, чтобы соотношение сторон сохранялось.Вот пример:

Исходное изображение (400px x 300px)

<img src="https://i.stack.imgur.com/lKtag.png"/>

Изображение с измененным размером (40% ширины контейнера)

<img src="https://i.stack.imgur.com/lKtag.png" style="width:40%"/>