<div>是HTML中最常用的標簽之一，它表示HTML文檔中的一個分隔區域。通常情況下，<div>的大小和位置是通過CSS樣式來控制的。在實際開發中，經常遇到需要保持<div>的寬高比例不變的需求。本文將詳細解釋如何使用CSS實現<div>保持比例的效果，并提供一些具體的代碼案例。

在<div>保持比例的實現中，最常用且最簡單的方法是通過設置padding或者margin來控制寬高比例。下面我們來看幾個具體的案例。

第一個案例是一個正方形的<div>。它的寬高比例需要保持為1:1。我們可以使用padding來實現這個效果。代碼如下：

<style>
.square {
width: 200px;
padding-top: 100%;
background-color: red;
}
</style>
<br>
    <div class="square"></div>

在上面的代碼中，我們給<div>設置了一個固定的寬度（200px），然后通過padding-top屬性設置了一個相對于寬度的百分比（100%）。這樣一來，<div>的高度就會等于寬度的百分之百，從而保持了寬高比例為1:1。

第二個案例是一個橫向比例為4:3的<div>。同樣使用padding來實現。代碼如下：

<style>
.ratio {
width: 200px;
padding-top: 75%;
background-color: blue;
}
</style>
<br>
    <div class="ratio"></div>

在上面的代碼中，我們給<div>設置了一個固定的寬度（200px），然后通過padding-top屬性設置了一個相對于寬度的百分比（75%）。根據比例關系，75%就是4:3的比例。這樣一來，<div>的高度就會等于寬度的百分之七十五，從而保持了寬高比例為4:3。

除了使用padding，還可以使用CSS的flexbox布局來保持<div>的寬高比例。下面是一個使用flexbox布局實現的案例。

<style>
.container {
width: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: green;
}
<br>
      .content {
width: 80%;
padding-top: 75%;
background-color: yellow;
}
</style>
<br>
    <div class="container">
<div class="content"></div>
</div>

在上面的代碼中，我們使用了一個包含兩個<div>的容器。容器使用了flexbox布局，通過設置justify-content和align-items屬性來讓其中的<div>垂直居中。內部的<div>使用了padding-top屬性來設置寬高比例（75%）。這樣一來，無論內部的<div>的寬度如何變化，它們始終保持著相同的寬高比例。

以上就是關于<div>保持比例的幾個案例。通過使用padding、margin和flexbox布局，我們可以輕松地實現各種不同寬高比例的<div>效果。希望本文的內容可以對你有所幫助，如果有任何疑問，歡迎留言討論。