如何创建具有长宽比和居中的响应式 Square Div？

根据视口尺寸维持纵横比

要实现根据视口宽度和高度维持纵横比的响应式方形 div，请利用CSS 的纵横比属性。

要求：

• 纯 CSS
• 无论方向如何，正方形都会适应视口的最小尺寸
• 视口内的水平和垂直居中

宽高比解决方案

宽高比属性允许您指定所需的宽高比。默认情况下，该属性设置相对于宽度的高度。因此，1 / 1 的长宽比会创建一个正方形。

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

适应视口尺寸

要确保您的正方形 div 适应视口的最小尺寸：

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

垂直和水平居中

将正方形居中需要将垂直和水平方向的边距设置为自动：

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

示例

<code class="html"><div class="square">Aspect ratio 1:1</div></code>

结论

使用纵横比，您可以创建响应式方形 div，保持其纵横比并在视口内居中，确保无论视口尺寸或方向如何，一致的视觉体验。

以上是如何创建具有长宽比和居中的响应式 Square Div？的详细内容。更多信息请关注PHP中文网其他相关文章！