如何僅使用 CSS 來保持 Div 的長寬比？-css教學-PHP中文網

如何僅使用 CSS 來保持 Div 的長寬比？

Mary-Kate Olsen

發布： 2024-12-21 04:17:19

原創

889 人瀏覽過

How to Maintain Aspect Ratio of a Div Responsively Using Only CSS?

使用CSS 保持縱橫比的響應式Div

當嘗試在調整div 大小時保持縱橫比時，您可以利用CSS 不依賴JavaScript。

CSS 允許您使用百分比連結元素的高度和寬度。以下是如何實現它：

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

登入後複製

在此範例中，包裝器 div 設定所需的寬度 (50%)。 wrapper:after 偽元素使用相對於包裝器寬度的 padding-top 百分比。值 56.25% 對應於 16:9 的寬高比。

主 div 填充整個包裝器 div，保持包裝器上的 padding-top 百分比指定的寬高比：after 偽元素。

利用 CSS，您可以輕鬆地保持 div 的寬高比，同時響應性地調整其大小，而無需引入 JavaScript。

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