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