Set height as width only to css ratio

Question

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

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

There are examples on the Internet for links to elements <div>and their background. But in the case of elements, <img>indentation does not work

Similair example: Maintain aspect ratio of div with CSS

Edit using jQuery you can achieve above:

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

Answer 1

Use viewport width ( vw) to determine the width in the height property:

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

viewport is the visible area of ​​the web page.

100vw * 100vh, vw wh - .

, "vw" 1% -.

: : vw, vh, vmin, vmax

Answer 2

vw ( ), :

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

---

padding-bottom, div.

https://jsfiddle.net/m11L9kjb/1/

Answer 3

, & hellip; , , :

position: relative;
margin: 0 auto;
width: 100vw;
max-width: 1080px;
max-height: 1920px;
height: calc(100vw * (16/9));