Height equal to dynamic width (CSS fluid layout)

html

css

aspect-ratio

responsive-design

byNikita Barsukov·Aug 18, 2024

For dynamically setting a CSS element's height equal to its variable width, you utilize the padding-top property. Set this property as a percentage to create a relative height in accordance with the width:

.square {
  width: 50%; /* Adjust to your heart's content */
  height: 0;
  padding-top: 50%; /* 1:1 aspect ration, it's hip to be square! */
}

Translate this style into your HTML:

<div class="square">
  <!-- Content adjusts with width like a chameleon -->
</div>

Your .square class now maintains a 1:1 aspect ratio, akin to a well-behaved square adjusting with changing width.

Bootstrap of dynamic sizing: pseudo-elements

Pseudo-elements offer another layer of flexibility to maintain the aspect ratio of div with changing content. The ::before or ::after pseudo-elements act as invisible square drill sergeants, keeping the aspect ratio in check.

.container-relative {
  width: 100%; /* Parental obedience */
  display: inline-block;
  position: relative;
}

.container-relative::before {
  content: '';
  display: block;
  padding-top: 100%; /* POW! Right in the aspect ratio */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Blend this structure into your HTML:

<div class="container-relative">
  <div class="content">
    <!-- Your constantly transforming content goes here -->
  </div>
</div>

Moving with the times: `aspect-ratio`

For those with a certain edge, aka modern browsers, make use of the shiny new aspect-ratio property:

.modern-box {
  width: 100%; /* Fluid width, no solid or gas state here */
  aspect-ratio: 1 / 1; /* 1:1 aspect ratio for the modern minimalist */
}

Viewport gymnastics with `vw`/`vh`

In response to changing viewports, let vw (viewport width) and vh (viewport height) do the heavy lifting:

.viewport-box {
  width: 50vw;
  height: 50vw; /* Same as width, practicing some viewport yoga */
}

Your box now sticks to a 1:1 aspect ratio, pirouetting gracefully with viewport's ebbs and flows.

In-practice applications and considerations

Play with aspect ratios

Experiment with the padding-top for different aspect ratios:

For a 4:3 aspect ratio, like vintage TVs, use padding-top: 75%.
For a cinematic 16:9 aspect ratio, the golden padding-top: 56.25% stands ready.

Reacting to resizing with JavaScript

Don't let JavaScript or jQuery feel left out. Listen to window resize events to keep the aspect ratio on its toes, and maintain your peace of mind.

Cross-browser consensus

Compatibility check, anyone? Remember to verify CSS aspect-ratio on caniuse.com.

Tambourine over the pseudo-element

Absolute positioning — keep your eye on the .content. It fits just right, like Cinderella's slipper, on the space padded by the pseudo-element.

Must-try examples and tweaking experiments

Embed CodePen or JSFiddle sandboxes. Code tinkering is the coder's playground — adjust widths, maintain aspect ratios and get your hands dirty.

explain-codes / Html / Height equal to dynamic width (CSS fluid layout)

Linked

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



Css scale height to match width - possibly with a formfactor



Responsively change div size keeping aspect ratio



Input with display:block is not a block, why not?



How to make a div 100% height of the browser window



Make a div fill up the remaining width



How can I make a div not larger than its contents?



Bootstrap of dynamic sizing: pseudo-elements Moving with the times: Viewport gymnastics with /In-practice applications and considerations Must-try examples and tweaking experiments