CODEWITHSUNDEEP
htmlcssimagesize
Alexander
Alexander

Reputation: 971

Set height as a ratio of width with only css

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

Upvotes: 23

Views: 44913

Answers (5)

SamsonTheBrave
SamsonTheBrave

Reputation: 617

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>

Upvotes: 34

thothlike
thothlike

Reputation: 145

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%;
}
...

Upvotes: 10

Joe Berry
Joe Berry

Reputation: 26

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

Upvotes: 1

HelpingHand
HelpingHand

Reputation: 1065

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

Upvotes: 15

hector22x
hector22x

Reputation: 104

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/

Upvotes: 0

Related Questions