Set height as a ratio of width with only css

Question

I want to achieve the following for an <img> element in HTML, using only CSS:

width: calc(100% - 20px)
height: calc(width * 0.5625) /*16:9 aspect ratio*/

There are similair examples all over the internet regarding <div> elements and their background. But in the case of <img> elements, changing the padding does not work

Similair example: Maintain the aspect ratio of a div with CSS

Edit, using jQuery one can achieve the above with:

$(".myImage/s").outerHeight($(".myImage/s").outerWidth() * 0.5625);

Answer 1

CSS has a built-in property called aspect-ratio just assign it to the element after height or width has been defined. CSS-tricks has an example and I made a code snippet below.

div{
  width:50vw;
  border: 2px solid black;
  border-radius: 15px;
  margin:5px;
  aspect-ratio: 16/9;
 }

<div>
</div>

Answer 2

Use viewport-width (vw) for defining width in the height property:

width: calc(100% - 20px)
height: calc((100vw - 20px) * 0.5625) /*16:9 aspect ratio*/

The viewport is the visible area of the web page.

Its full size is 100vw * 100vh, where vw and wh are the viewports size units.

Thus one "vw" is equal to 1% of the web page's currently visible width.

More can be found at: Viewport units: vw, vh, vmin, vmax