首頁 > web前端 > css教學 > CSS 能否透過動態匹配元素高度和寬度來保持 1:1 的縱橫比?

CSS 能否透過動態匹配元素高度和寬度來保持 1:1 的縱橫比?

Mary-Kate Olsen
發布: 2024-12-27 16:40:11
原創
381 人瀏覽過

Can CSS Maintain a 1:1 Aspect Ratio by Dynamically Matching Element Height to Width?

在 CSS 流體佈局中動態匹配高度和寬度

在流體 CSS 佈局中,元素可以根據可用空間自動調整其大小。當嘗試保持特定的寬高比(例如正方形或矩形)時,這可能會帶來挑戰。

問題:

CSS 可以用來設定高度元素與其寬度相同,維持 1:1 的寬高比比率?

範例:

考慮具有以下結構的容器元素和巢狀 div元素,版面:

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+
登入後複製

CSS:

div {
  width: 80%;
  height: same-as-width
}
登入後複製

解:

解:
#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}
登入後複製
<div>
登入後複製

雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度清楚地僅使用CSS來匹配寬度,可以使用虛擬元素和巧妙的方法來實現解決方法

透過使用虛擬元素上的margin-top 屬性並將其設定為75%(以符合4: 3 的寬高比),我們創造高度的參考。然後,該元素絕對定位在該參考區域內,導致高度等於其寬度。

以上是CSS 能否透過動態匹配元素高度和寬度來保持 1:1 的縱橫比?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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