Go to homepage

Projects /

August 4, 2020

Aspect Ratio in CSS

By CodyHouse
386 HTML, CSS, JS components. Download →

How to set the aspect ratio in CSS using custom properties.

While we wait for the aspect-ratio property to be supported by more browsers, here's a CSS trick (also known as "the padding hack") to set the aspect ratio of an element!

Here's how it works: set the height of the parent equal to 0, the padding-bottom equal to (height/width)*100% of the desired ratio. The child should be in absolute position and inherit the size of the parent. Finally, we add object-fit "cover" to prevent image distortion. Use a custom property to make the ratio easy to customize.

HTML:

<div class="custom-aspect-ratio">
  <img src="assets/img/img.jpg" alt="Image description">
</div>

CSS:

.custom-aspect-ratio {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
}

.custom-aspect-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Live demo:

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.