Here are a few potential titles for your article, focusing on the question-and-answer format: * Can I Create a Dynamically-Sized Square Div that Preserves Aspect Ratio and Centers in the Viewport? *

Maintaining Aspect Ratio by Width and Height

Can a square div dynamically fit and center within the viewport while preserving its aspect ratio based on both width and height?

Requirements:

• CSS-only solution
• Square size automatically adjusts to the viewport's minimum dimension.
• Square is centered both horizontally and vertically.

Solution:

The aspect-ratio Property (2022)

To achieve our goal, utilize the aspect-ratio property (MDN reference). This remarkable tool allows us to specify the ratio of width to height, ensuring the desired aspect is maintained.

Maintaining Aspect Ratio Based on Viewport Size (Width and Height):

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

/* For the demo */

body {
  margin: 0;
}</code>

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

In this example:

• Divs with class ar-1-1 maintain a 1:1 aspect ratio.
• Divs with class ar-1-19 maintain a 16:9 aspect ratio.
• All divs dynamically adjust their size based on the viewport's dimensions, ensuring proper centering.

The above is the detailed content of Here are a few potential titles for your article, focusing on the question-and-answer format: * Can I Create a Dynamically-Sized Square Div that Preserves Aspect Ratio and Centers in the Viewport? *. For more information, please follow other related articles on the PHP Chinese website!