Set height as a ratio of width with only css - html

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

Answer 3

the proposed solutions so far use vw which only work if you want the image to fill the entire page.
but there is a much cleaner solution that keep the image aspect ratio 9/16 in all size containers.
HTML:
...
<div class="image image-9-16"> <!-- replace image and image-9-16 with any name you like -->
<img src="..." />
</div>
...
CSS:
.image {
position: relative;
display: block;
width: calc(100% - 20px);
max-width: calc(100% - 20px);
height: auto;
max-height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.image::before {
display: block;
content: "";
}
.image, .image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.image-9-16::before {
padding-top: 56.25%;
}
and that'll work no matter the width of the container holding the image with no need to place the image as a background-image... and now you can even add more aspect ratios if you want...
.image-1-1::before {
padding-top: 100%;
}
.image-3-4::before {
padding-top: 75%;
}
.image-9-21::before {
padding-top: 42.857143%;
}
...

Answer 4

you can use vw (viewport width) to do that:
width: calc(100vw - 20px);
height: calc((100vw - 20px) * 0.5625); /*16:9 aspect ratio*/
You can also use the padding-bottom method if you place the image as a
background for the div.
https://jsfiddle.net/m11L9kjb/1/

Answer 5

This worked for me using the actual ratio… then I needed a max dimension, so make sure you set them before setting the height:
position: relative;
margin: 0 auto;
width: 100vw;
max-width: 1080px;
max-height: 1920px;
height: calc(100vw * (16/9));