如何創建具有長寬比和居中的響應式 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中文網其他相關文章！