如何使用 CSS 保持寬高比並使 Div 居中？

根據寬度和高度保持縱橫比

確保 div 保持其縱橫比對於響應式設計至關重要。這可以確保元素的比例保持一致，無論其尺寸或方向如何。

要只使用 CSS 來實現此目的，我們可以利用現代的 aspect-ratio 屬性。

Aspect -Ratio 屬性

aspect-ratio 屬性指定元素的寬高比。例如，值 1 / 1 將建立一個正方形，而 16 / 9 將建立一個與 16:9 顯示器具有相同寬高比的矩形。

水平和垂直居中Div

要將元素在其父元素中水平和垂直居中，我們可以使用以下CSS 屬性：

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

範例程式碼

範例程式碼

結合寬高比和居中屬性，我們可以創建一個在視口居中的同時保持其縱橫比的方形div：

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

此程式碼將建立一個佔據整個視窗的方形div，同時保持1:1 的縱橫比。 div 也將在視窗內水平和垂直居中。

附加說明

• 尚未在所有瀏覽器中支援寬高比屬性，但在現代瀏覽器中支援例如 Chrome、Firefox 和 Safari。
• 為了確保與舊版瀏覽器的兼容性，您可以使用[picturefill](https://github.com/scottjehl/picturefill) 或[respond.js](https://github.com/ scottjehl/Respond）。

以上是如何使用 CSS 保持寬高比並使 Div 居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！