知道px的高度和宽度，保持div的纵横比（以％为单位）

Question

I'm adding a background image to a div.

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

The CSS is dynamic. It could be for example...

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

I'm trying to calculate the height in js, in order to maintain the aspect ratio of the image.

How can I set a correct height value in CSS, based the width in CSS which is set in %, to maintain the image size ratio if I know the width and height of the original image in px?

The problem would look something like this:

Image width = 300px

Image height = 520px

Width in CSS = 65%

Height in CSS to maintain aspect ratio = ?

I cannot use the width of the parent container for calculations.

I cannot grab the dynamic image width in px using offsetWidth .

I cannot just use the image in the div.

Answer 1

You do not need to know the original dimensions of the image. Setting one dimension for the image automatically sets the other such that the aspect ratio is maintained. Here is an example:

Original Image (400px x 300px)

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

Resized Image (40% of the container's width)

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