Can I scale a div's height proportionally to its width using CSS?

Pairing with a Parent: The Aspect Ratio Solution

For maintaining the aspect ratio of a div relative to its width, you can use padding-bottom on a parent element. This technique is referred to as the padding-bottom or padding-top trick.

.parent {
  position: relative;
  width: 25%; /* The bigger the better */
  padding-bottom: 25%; /* TIP: This should be the same as the width! */
}

.child {
  position: absolute;
  width: 100%; /* Filling up the parent without any leftovers */
  height: 100%; /* Dinner is served 🍝 */
}


All about the aspect-ratio property

Welcome to the new era of styling! CSS now supports the aspect-ratio property, which can be used to automatically adjust the height for given width, making this ratio control a whole lot easier!

.aspect-ratio-box {
  width: 30%; /* Control the width */
  aspect-ratio: 1 / 2; /* Let CSS handle the height */
}


The ViewPort Way

To make the div maintain its aspect ratio even when the viewport size changes, you can try using ViewPort Width (vw) units. Use this trick if you're looking to create UI that stays slick and shiny, irrespective of the screen size.

.viewport-box {
  width: 30vw; /* This is like saying "Stay within 30% of the viewport's width" */
  height: 15vw; /* This one goes like "Don't exceed more than 15% of the viewport's width" */
}


Syncing the Proportions: Overlaying content and maintaining the ratio

If you ever need to overlay complex content atop your proportionally scaled div, you can use absolute positioning within a relative container to keep the aspect ratio intact.

.container {
  position: relative;
  width: 50%; /* Let's ride on half of the browser's width */
  height: 0;
  padding-top: 56.25%; /* Cause we're keeping it widescreen! */
}

.inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* We're doing 100 push-ups 🏋️ */
  height: 100%; /* And 100 sit-ups too! 🤸 */
}


Proportional scaling pitfalls

Remember, container constraints can be a party spoiler! Keep in check that parent containers do not have fixed heights or unset overflow.

Live examples of scaling

To see these proportional scaling techniques in action, check out these JSFiddle demos.

Embracing fluid typography

Integrate along with your proportional scaling, the concept of fluid typography. Use the calc() function along with viewport units to scale typography seamlessly alongside your div.

.fluid-text {
  font-size: calc(1vw + 1vh + 0.5vmin); /* font-size changing with viewport */
}
