純css實現容器高度隨寬度等比例變化的四種解決方案

使用一個隱藏的圖片來實現

這個方法是我最推薦的，由於不須要考慮任何兼容性，PC移動完美運行。除了增長了一個dom結構，可是相對與一個頁面成百上千的代碼來講，不值一提

咱們知道，div容器若是不給定高度，它的高度會隨着容器內部的元素變化而撐大，這個時候，咱們在容器內部添加一張符合咱們寬高比例的圖片，給圖片設置寬度100%；高度auto。無論咱們的父容器如何變化，內部的img寬度都是100%，圖片是會嚴格按照比例i自動縮放的，相應的，咱們內部的子容器的蓋度也就會按照比例縮放了

#container {
    width: 100%;
  }
  .attr {
    background-color: #008b57;
  }
  .attr img{
    width: 100%;
    height: auto;
  }
  </style>
<div id='container'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

若是你以爲增長img標籤多發了http請求，那麼請繼續往下看，神器base64圖片編碼幫你解決這個問題，因爲咱們的的圖片只須要一我的形狀而已，因此能夠大膽的壓縮，而後編碼，連http請求都省了，嘎嘎~

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQMAAAD5SO1IAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAABlJREFUSMftwYEAAAAAw6D7U19gCNUAACAcCigAAeZ4u9wAAAAASUVORK5CYII=" alt="">

使用vmin

這個單位也是css3的新單位(css3大法好~)，咱們將父容器的寬度和高度定義爲相同的vmin，這樣父容器的高度和寬度就是相同值，這個時候，子容器的寬高值設爲百分比，無論父容器大小如何變，子容器的高度和寬度比都是不會變的。

單位 說明
vw 相對於視窗的寬度
vh 相對於視窗的高度
vmin 相對於視口的寬度或高度中較小的那個被均分爲100單位的vmin
vmax 相對於視口的寬度或高度中較大的那個被均分爲100單位的vmax

#container{
  width: 100vmin;
  height: 100vmin;
  }

.attr {
  width: 50%;
  height: 50%;
  background-color: orange;
}

使用cale

cale()是css3的心特性，它的值能夠是一個表達式，這裏咱們關心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{
  width:50%;
  height: calc(50%);
}

padding-bottom實現

這裏方法很是巧妙，因爲padding-bottom的屬性值百分比是按照父容器的寬度來計算的，因此這裏咱們設置容器寬度爲父容器的50%；padding-bottom也爲50%；就都是父容器寬度的50%；顯示出來就是一個完美的正方形了

看個代碼：

<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>

<div id='container'>
    <div class='attr'></div>
</div>