首頁 > web前端 > css教學 > 如何使用 CSS 自動調整 Div 元素大小來保留寬高比?

如何使用 CSS 自動調整 Div 元素大小來保留寬高比?

DDD
發布: 2024-11-20 01:49:01
原創
1007 人瀏覽過

How Can I Preserve Aspect Ratio in Auto-Resizing Div Elements Using CSS?

在自動調整大小的Div 元素中保留寬高比

當Div 元素需要適應不同的螢幕尺寸並同時保持特定的長寬比。這可以透過使用寬高比 CSS 屬性以及寬度和高度屬性的直覺組合來實現。

為了優雅地處理寬度和高度的變化,您可以利用寬高比計算 --r = 寬度 / 高度。以下是如何在CSS 中實現它:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width: min(90%, min(960px, 90vh * var(--r)));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}
登入後複製

在此範例中:

  • --r 是一個自訂CSS 變量,它將寬高比儲存為小數。
  • aspect-ratio 屬性設定計算的縱橫比。
  • width 屬性計算 90% 之間的最小值可用空間、960px 和視口高度的 90% 乘以縱橫比。這可確保寬度與高度保持比例。
  • 高度由縱橫比屬性結合計算出的寬度決定。

這樣的方法可確保 div 元素自動調整大小,同時保持所需的寬高比,適應寬度和高度的變化。

以上是如何使用 CSS 自動調整 Div 元素大小來保留寬高比?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板