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

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 2

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 3

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 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));