get新技能： 如何設置元素高度與寬度成特定比例。寬度改變，高度自動按比例改變。 例如設置寬高比16:9。

 

設置寬高比在很多時候是有用的。

下面的栗子，我們設置一個容器的寬高比為16:9

//HTML代碼片段
<div class="container">
      <div class="wrapper">
         <div class="content">content</div>
      </div>
    </div>

//css 代碼
           div{
              border: 1px solid green;
            }

      .container{ width:400px; }

            .wrapper{
              position:relative;
              padding-top:25px;
              padding-bottom:56.25%;   // 16/9 = 0.5625;
              height:0;
              border: 1px solid red;
            }
            .content{
              position:absolute;
              top: 0;
              left: 0;
              width: 100%;
              height:100%;
              background:gray;
            }
            

我們看到先設置.container容器寬度為400.這個值可以使任意的寬度，也可以是一個百分比。

.wrapper容器設置了 padding-bottom為56.25% 。 這個百分比是16/9的值，這里設置padding-bottom為父容器.container的寬度的百分之56.25.

另外。設置padding-top 為25px，這里在實際中也比較有用。 比如我們要設置一個視頻播放器播放界面的寬高比為16:9。我們還希望播放界面上面留下25px的高度來放置播放控制的按鈕。

通過padding-bottom和padding-top撐起了.wrapper容器的高度。並且設置height為0;

接下來是.comtent元素。我們設置這個元素絕對定位。top:0,left:0; width:100%;height:100%;因為它的父元素.wrapper的寬度和高度已經成比例了，所以使用width:100%;height:100%;就讓content容器達到目的了。通過改變.container的寬度，.content元素的高寬也能成比例的改變。

結果

.container元素--盒模型

.wrapper元素--盒模型

.content元素--盒模型

 

這里.container元素的寬度可以使用百分比來設置，這在很多時候非常有用。