CSS方法
一種實現<div>元素高度等比的方法是使用CSS。我們可以通過設置元素的padding-bottom屬性來實現高度等比例的效果。具體步驟如下：
<p><style></p>
<p>.container {</p>
<p> position: relative;</p>
<p> width: 100%;</p>
<p>}</p>
<p>.content {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> right: 0;</p>
<p> padding-bottom: 56.25%; /* 16:9 aspect ratio */</p>
<p>}</p>
<p></style></p>在上述代碼中，我們創建了一個外層容器<div class="container">和一個內層內容區域<div class="content">。通過設置.content元素的padding-bottom屬性為56.25%，我們實現了一個16:9的高度等比例。由于.padding-bottom屬性是相對于元素寬度來計算的，因此當屏幕尺寸發生變化時，元素的高度會自動相應調整。
JavaScript方法
除了使用CSS來控制<div>元素的高度等比例外，我們還可以使用JavaScript來實現這一效果。下面是一個使用JavaScript函數的案例：
<p><script></p>
<p>function setAspectRatio() {</p>
<p> const container = document.getElementById('container');</p>
<p> const aspectRatio = 16 / 9;</p>
<p> const width = container.offsetWidth;</p>
<p> const height = width / aspectRatio;</p>
<p> container.style.height = height + 'px';</p>
<p>}</p>
<p>setAspectRatio();</p>
<p>window.addEventListener('resize', setAspectRatio);</p>
<p></script></p>在上述代碼中，我們定義了一個名為setAspectRatio的JavaScript函數。該函數獲取容器元素的寬度，然后根據指定的寬高比計算得到高度，并將其設置為容器元素的樣式。在屏幕尺寸發生變化時，我們通過添加resize事件監聽器來實時更新元素的高度。
案例參考
以下是一個真實案例，展示了如何使用高度等比的<div>元素來實現響應式視頻展示。
<p><!DOCTYPE html></p>
<p><html></p>
<p><head></p>
<p> <style></p>
<p> .video-container {</p>
<p> position: relative;</p>
<p> width: 100%;</p>
<p> padding-bottom: 56.25%; /* 16:9 aspect ratio */</p>
<p> }</p>
<p> .video-container iframe {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> }</p>
<p> </style></p>
<p></head></p>
<p><body></p>
<p> <div class="video-container"></p>
<p> <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p> </div></p>
<p></body></p>
<p></html></p>在上面的代碼中，我們創建了一個.video-container類來包裹一個嵌入式YouTube視頻。通過設置.video-container元素的padding-bottom屬性為56.25%，我們保持了視頻展示的16:9高度等比例。視頻自適應容器的寬度，并保持高度等比例的特點讓視頻在不同的屏幕尺寸下都能得到良好的顯示效果。
通過CSS和JavaScript，我們可以實現<div>元素的高度等比例。無論是通過CSS的padding-bottom屬性，還是通過JavaScript計算高度并動態設置樣式，我們都可以讓<div>元素在不同屏幕尺寸下保持合適的展示效果。