以下是您文章的一些可能的標題，重點是問答格式： * 我可以建立一個動態大小的方形 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中文網其他相關文章！