如何建立高度等於其動態寬度的 CSS Div？

高度匹配動態寬度：CSS 流體佈局

為了實現視覺平衡的設計，開發人員經常尋求對齊高度元素的寬度。這個問題解決了一個常見的設計挑戰：如何建立高度等於寬度的 div，保持 1:1 的縱橫比，同時允許寬度動態變化。

建議的解決方案涉及使用具有預先定義寬高比的佔位符元素。透過將主要元素放置在佔位符內，即使主要元素的寬度發生變化，縱橫比也能保持不變。關鍵在於利用諸如position和margin-top之類的CSS屬性來策略性地對齊元素並確保它們的尺寸保持成比例。

以下程式碼片段示範了該方法：

#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! */
}

在此例如，#container 建立了 div 的動態寬度。 #dummy 元素用作佔位符，具有固定的 4:3 寬高比，透過 margin-top 屬性實現。然後 #element 絕對定位在 #dummy 內，確保它填滿整個區域並保持與寬度相同的 1:1 比例。

以上是如何建立高度等於其動態寬度的 CSS Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！