css 高度隨寬度比例變化

 

【方案一：padding實現】

原理：

一個元素的 padding，如果值是一個百分比，那這個百分比是相對於其父元素的寬度而言的，padding-bottom 也是如此。

使用 padding-bottom 來代替 height 來實現高度與寬度成比例的效果，將 padding-bottom設置為想要實現的 height 的值。同時將

其 height 設置為 0 以使元素的“高度”等於 padding-bottom 的值，從而實現需要的效果。

<div class="father">
    <div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
  padding-bottom: 20%;
  width: 20%;
  height: 0;
  background: #888888;
}
</style>

上例寬高比是1比1，實現的是正方形，並且根據父級盒子寬度實現等比縮放

 

【方案二：一個隱藏的圖片來實現】

原理:

div容器如果不給定高度，它的高度會隨着容器內部的元素變化而撐大，這個時候，我們在容器內部添加一張符合我們寬高比例的圖片，給圖片設置寬度100%；高度auto，我們知道圖片只設置寬度的話，高度會隨寬度來進行比例變化，自動縮放，這樣我們內部的子容器的高度也就會按照比例縮放了。當然這個img你可以占位隱藏，也可以用別的盒子覆蓋上。

#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>

 

這個方法不需要考慮任何兼容性，PC移動完美運行。除了增加了一個dom結構，但是一個頁面成百上千的代碼來說，不值一提。

如果你覺得增加img標簽多發了http請求，那么base64圖片編碼可以解決這個問題，由於我們的的圖片只需要一個形狀而已，所

以可以大膽的壓縮，然后編碼，連http請求都省了。

 

【方案三：vw,vh】

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

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

vmax 相對於視口的寬度或高度中較大的那個被均分為100單位的vmax

<div class="father">
    <div class="childbox"></div>
</div>
.childbox{    
  width: 20%;
  height: 20vw;
  background: #888888;
}

 

 

.