<div 保持寬高比
所謂"div 保持寬高比"，是指能夠在不改變元素寬高比例的情況下，靈活地調整元素的大小。在網頁設計中，我們經常會遇到需要將圖片或視頻等比例地顯示在不同大小的容器中的情況。這時使用div來實現寬高比的保持，可以讓我們更方便地布局和調整頁面。
下面通過幾個代碼案例來詳細解釋div如何實現保持寬高比的效果。
案例一：固定寬高比的圖片展示 假設我們有一張圖片，其寬度是400px，高度是300px。我們希望將這張圖片顯示在一個寬度為200px的容器中，并保持圖片的寬高比例。
，創建一個div容器，設置其寬度為200px，并給其添加一個類名為"ratio-container"：
<div class="ratio-container" style="width: 200px;"> <!-- 圖片展示區域 --> </div>
接下來，通過給容器添加一個偽元素:before，并將其高度設置為0，padding-bottom設置為75%（即300/400*100%），來實現容器的寬高比例：
<style> .ratio-container:before { content: ""; display: block; padding-bottom: 75%; } </style>
最后，將圖片添加到容器內，并設置其寬度為100%：
<div class="ratio-container" style="width: 200px;"> <img src="image.jpg" style="width: 100%;"> </div>
這樣，圖片將會按照原始的寬高比例進行顯示，并保持寬度為200px。
案例二：可調整寬高比的視頻播放器 假設我們有一個視頻播放器，我們希望能夠根據不同的容器大小，自動調整視頻的寬高比例。
，創建一個div容器，并給其添加一個類名為"video-container"：
<div class="video-container"> <!-- 視頻播放器區域 --> </div>
接著，設置容器的寬度和高度，可以是固定的像素值，也可以是相對于父元素的百分比。例如，設置寬度為500px，高度為0，padding-bottom為56.25%（即16:9的寬高比）：
<style> .video-container { width: 500px; height: 0; padding-bottom: 56.25%; position: relative; } </style>
然后，在容器內添加一個嵌套的div，用來包裹視頻播放器的內容。將其寬度和高度設置為100%：
<div class="video-container"> <div style="width: 100%; height: 100%;"> <!-- 視頻播放器 --> </div> </div>
最后，為了讓視頻播放器能夠充滿容器，可以使用絕對定位將其放置在容器的左上角：
<style> .video-container div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
這樣，不論容器的大小如何變化，視頻播放器都能夠保持16:9的寬高比例。
起來，使用div來實現寬高比的保持可以讓我們更方便地布局和調整頁面。通過設置div的偽元素或通過包裹嵌套的元素，并設置合適的寬高比例和大小，我們可以在不改變元素寬高比例的前提下靈活地調整元素的大小。以上是兩個常見的案例，你可以根據實際需求進行拓展和變化。希望這篇文章能夠幫助你更好地理解和應用div保持寬高比的方法。