div 寬高比vh 是一種用于設置 HTML 元素寬高比的常用技巧。在前端開發中，我們經常需要設置元素的寬高比，以便適應不同的屏幕尺寸或者實現特定的設計效果。vh 是一個相對單位，它表示相對于視口的高度的百分比。通過將 div 元素的寬度設置為固定值，而將高度設置為 vh 單位，我們可以實現一個具有固定寬高比的 div 元素。本文將通過幾個代碼案例來詳細解釋說明如何使用 div 寬高比 vh。
，我們使用一個簡單的例子來說明如何使用 div 寬高比 vh。下面的代碼將創建一個 div 元素，寬度為 200px，高度為視口高度的 50%：

<p>示例 1:</p>
<pre>
<div style="width: 200px; height: 50vh; background-color: #f2f2f2;"></div>

在這個例子中，我們通過將高度設置為 50vh，即視口高度的 50%，實現了一個寬高比為 1:2 的 div 元素。
接下來，我們將使用一個實際案例來進一步說明如何使用 div 寬高比 vh。假設我們需要在一個網頁中顯示一張寬高比為 16:9 的圖片，我們可以使用以下代碼實現：

示例 2:

<div style="width: 100%; height: 0; padding-bottom: 56.25%; background-image: url('image.jpg'); background-size: cover;"></div>

在這個例子中，我們將 div 元素的高度設置為 0，并通過 padding-bottom 屬性來實現寬高比。這里的 padding-bottom 值為 56.25%，即 9/16，可以保證最終的寬高比為 16:9。我們還使用 background-image 和 background-size 屬性來設置背景圖片及其適應方式。
除了以上兩個例子，我們還可以通過動態計算來實現 div 寬高比 vh。例如，我們希望實現一個寬高比為 4:3 的 div 元素，其中寬度與視口寬度保持一致。下面的代碼展示了如何通過 JavaScript 來實現：
`

示例 3：

<script>
window.onload = function() {
var div = document.getElementById('myDiv');
var width = div.offsetWidth;
var height = Math.round(width * 0.75); // 根據寬度計算高度，保持寬高比為 4:3
div.style.height = height + 'px';
}
</script>
<div id="myDiv" style="width: 100%; background-color: #f2f2f2;"></div>

在這個例子中，我們使用 JavaScript 在頁面加載完成后計算出 div 元素的高度，并通過 div.style.height 屬性來設置。
通過以上幾個代碼案例，我們可以看到如何使用 div 寬高比 vh 來實現不同的設計需求。無論是簡單的固定寬高比，還是復雜的動態計算，都可以通過這種技巧簡單而靈活地實現。希望本文的例子能夠幫助你更好地理解和應用 div 寬高比 vh。