How to Maintain Aspect Ratio When Auto-Resizing a Div Element?

How to Maintain Aspect Ratio While Automatically Resizing a Div Element

Creating a div element that automatically adjusts its size while maintaining a specific aspect ratio can be a challenge. The goal is to ensure that the div remains centered within the window, shrinking or expanding as necessary to fit the available space without distorting its shape.

The key to achieving this lies in utilizing CSS properties that allow for aspect ratio control and adaptive sizing. The aspect-ratio property is a powerful tool introduced in CSS3 that enables developers to specify an intrinsic ratio between the height and width. This ratio will be maintained regardless of the available space.

In addition to aspect-ratio, the min-width and min-height properties can be used to establish minimum dimensions for the div. By combining these properties, we can create a div element that respects the specified aspect ratio while also fitting within the available window space.

Consider the following CSS code:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));

  display: flex;
  justify-content: center;
  align-items: center;


  background: linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

In this example, we define a --r variable to store the ratio of 960 to 540, representing the desired aspect ratio. The aspect-ratio property is then used to maintain this ratio.

The width property is set to the minimum of 90% of the available width, 960px, or the calculated width based on the available height and aspect ratio. This ensures that the div will maintain the specified ratio while fitting within the window.

The min-width and min-height properties are not explicitly set, but their default values of auto will allow the div to shrink to accommodate smaller window sizes while still preserving the aspect ratio.

The display property is set to flex to enable centered alignment within the wrapping div, and the justify-content and align-items properties are used to center the content within the div.

As a result, the stage div element will automatically resize while maintaining its aspect ratio, ensuring that it remains centered and visually consistent regardless of the window dimensions.

The above is the detailed content of How to Maintain Aspect Ratio When Auto-Resizing a Div Element?. For more information, please follow other related articles on the PHP Chinese website!