CSS題目系列（2） - 實現一個固定比例盒子

摘要： 在開發過程中，會有這麼一個情況，需要將一個盒子的尺寸定義為固定比例，且尺寸需根據檢視的尺寸來進行縮放，也就是響應式，常見的多如有矩形、圓形等。 下面我將使用下面的例子為大家進行講解： 正文 其實實現這個效果，有多種方法，下面逐一介紹。 1、垂直方向的padd...

在開發過程中，會有這麼一個情況，需要將一個盒子的尺寸定義為固定比例，且尺寸需根據檢視的尺寸來進行縮放，也就是響應式，常見的多如有矩形、圓形等。

下面我將使用下面的例子為大家進行講解：

正文

其實實現這個效果，有多種方法，下面逐一介紹。

1、垂直方向的padding

相信大家對 padding 都不陌生，但你知道他是如何取值的嗎？

看一下MDN中對 padding 給出的解釋：

也就是說， 給 padding 的值設定為百分比時，將根據父容器的寬度來計算。

現在假設我們有一個 div ，我們希望它的尺寸能根據 body （它的父容器）的寬度來實現固定比例：

<div class="box"></div>
複製程式碼

樣式部分

.box{
width:50%;
padding-bottom:50%;
}
複製程式碼

其實這裡的 padding-bottom 換成 padding-top 也一樣可以實現。

沒錯，就這麼簡單，我們已經實現了文章開頭所展示的效果。

但是我們使用這種方法的時候需要注意幾點：

1. 不需要設定 height ，最好就是手動設定為 0 。
2. 子元素需要設定為絕對定位（父容器為相對定位），否則子元素將被 padding 擠出去。

其它比例

前面實現的是一個正方形比例的，那如果我想要是 16:9 的呢？

那我們將根據一個公式： width * x / y 計算，如下：

.box{
width:50%;
padding-bottom: calc( 50% * 9 / 16 );
/* 或者 */
padding-bottom : 28.125%;
}
複製程式碼

2、視窗單位

視窗是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是 vw , vh , vmin 和 vmax 。它們都代表了瀏覽器（視窗）尺寸的比例和視窗大小調整產生的規模改變。

也就是說， 網頁的寬度是 100vw ，取一半就是 50vw ，無論怎麼縮放都是一半，而且這個一半不止可以用在 width 上。

所以：

<div class="box"></div>
複製程式碼

.box{
width:50vw;
height:50vw;
}
複製程式碼

一個正方形就出來了，簡單嗎？？？

其它比例

跟上面一樣，通過公式可以得到：

.box{
width:50vw;
padding-bottom: calc( 50vw * 9 / 16 );
/* 或者 */
padding-bottom : 28.125vw;
}
複製程式碼