以下是您文章的一些可能的标题，重点关注问答格式： * 我可以创建一个动态大小的方形 Div 来保留视口中的纵横比和中心吗？ *

通过宽度和高度保持纵横比

方形 div 可以在视口中动态调整和居中，同时根据宽度和高度保持其纵横比?

要求：

• 纯 CSS 解决方案
• 正方形大小自动调整为视口的大小最小尺寸。
• 正方形水平和垂直居中。

解：

纵横比属性（2022 )

为了实现我们的目标，请利用宽高比属性（MDN 参考）。这个出色的工具允许我们指定宽高比，确保保持所需的宽高比。

根据视口大小（宽度和高度）保持宽高比：

<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>

在此示例中：

• 具有 ar-1-1 类的 Div 保持 1:1 的宽高比。
• 具有 ar-1- 类的 Div 19 保持 16:9 的宽高比。
• 所有 div 根据视口尺寸动态调整其大小，确保正确居中。

以上是以下是您文章的一些可能的标题，重点关注问答格式： * 我可以创建一个动态大小的方形 Div 来保留视口中的纵横比和中心吗？ *的详细内容。更多信息请关注PHP中文网其他相关文章！