如何在針對不同視窗大小自動調整大小的同時保持 Div 元素的寬高比？

在不同的視窗大小中保持自動調整Div 元素大小的寬高比

在Web 開發中，通常希望有一個中央div保持特定的縱橫比，同時適應視窗大小的變化。然而，找到一個同時有效調整寬度和高度的解決方案可能具有挑戰性。

目前方法

提供的 CSS 和 HTML 程式碼建立一個居中的 div，它保持固定大小。當視窗尺寸變小時，div 會縮小，但不會以保留其原始寬高比的方式縮小。

使用寬高比屬性的解決方案

解決此問題，您可以利用縱橫比屬性。此屬性現已廣泛支持，可讓您為元素的尺寸指定固定比例。

<br>body {<br> height: 100vh;<br> margin: 0;<br> 顯示：flex;<br>對齊內容：中心;<br> 對齊項目：中心對齊項目;<br>背景：灰色;<br>}<p>.stage {<br> --r: 960 / 540;</p><p>縱橫比：var(--r);<br>寬度：min (90%, min(960px, 90vh*(var(--r))));</p><p>顯示：flex;<br>對齊內容：中心;<br>對齊項目：中心;</p><p>背景：</p><pre class="brush:php;toolbar:false">/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

}
pre>

1. 計算縱橫比： --r變數儲存計算為所需尺寸的寬度/高度 (960 / 540) 的縱橫比。
2. 設定寬高比：寬高比屬性將寬高比設定為計算值。這可確保元素始終保持該比例。
3. 計算寬度： 寬度屬性是使用 min() 函數設定的，該函數考慮原始寬度，即可用視窗寬度的 90%，和計算出的縱橫比的 90vh 倍。此公式可確保元素縮小以適應窗口，同時保持其縱橫比。
4. 將 Div 置中並設定樣式： div 使用 Flexbox 居中，其背景採用漸變樣式證明即使元素縮小時也能保持長寬比。

此解決方案可有效確保 div 元素保持其長寬比，同時適應不同的視窗尺寸（寬度和高度）。

以上是如何在針對不同視窗大小自動調整大小的同時保持 Div 元素的寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！