How Can I Maintain a Div's Aspect Ratio While Filling the Entire Screen with CSS?

Maintain Aspect Ratio of Div While Filling Screen Width and Height with CSS

Maintaining a fixed aspect ratio for a div while ensuring it fills the available screen width and height without exceeding the dimensions on either side can be a tricky task in CSS. To address this challenge, we present a pure CSS solution that leverages the new viewport units, vw and vh.

Using vw and vh, we can define the width and height of the div relative to the viewport width and height. This ensures that the div will always occupy the maximum space without breaking the aspect ratio. To prevent the div from overflowing, we also set max-height and max-width constraints using the ratio values.

To center the div both vertically and horizontally, we use position: absolute and position it at the top, bottom, left, and right edges of the window. This ensures that the div will remain centered regardless of the screen size.

div {
  width: 100vw;
  height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

This solution adapts to different screen sizes while maintaining the desired 16:9 aspect ratio. Resize the window vertically or horizontally, and the div will adjust accordingly, occupying the maximum space without scrollbars or distortion.

The above is the detailed content of How Can I Maintain a Div's Aspect Ratio While Filling the Entire Screen with CSS?. For more information, please follow other related articles on the PHP Chinese website!