CSS实现容器高度随宽度固定比例缩放的解决方案

今天做做图表过程中遇到一个问题，我的容器宽度都是使用Bootstrap那一套栅格系统，做出来之后在自己电脑上基本没什么大问题，但是放到老板的电脑屏幕上，却变得一长条的，原因就在于我把容器的高度设定为固定的300px，然而在屏幕分辨率高（或者说像素密度高）的屏幕上300px的高度相对于按50%的宽度，就成了一个横条了。

突然我就想，是不是可以让这个容器的宽高比固定一下呢？开完会后开始请教度娘，度娘里的众多结果中，无非就是那么四种方法，下面就来介绍以下这些方法以及我使用后的一些改进。

使用一个隐藏的图片来实现

这个方法我比较推荐，因为不需要考虑任何兼容性，PC移动完美运行。除了增加一个DOM结构，但是相对于一个页面成百上千的代码来说，不值一提。

我们知道，div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比的图片，给图片设置宽度100%；高度auto。不管我们的父容器如何变化，内部的img宽度都是100%，图片是会严格按照比例自动缩放的，相应的，我们内部的子容器的盖度也就会按照比例缩放了：

image

<style>
#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="">

笔者注：
这个方法我是比较推荐的，因为实现起来很简单，兼容性也好。但是我觉得还是在attr容器里面在加一个宽高都设为100%的容器用来放最终的内容比较稳妥一些，因为如果直接在 .sttr 里面放内容的话，里面的内容很可能会把 .attri再次撑大，这可不是我们想要的。

使用vw 单元

vw 的大小是通过viewport 的宽度设定的，因此可以通过该方法保持容器按照一定的比例显示。
笔者也是现在才知道还有vw这样的单位，真是学海无涯啊。
先介绍以下vw是啥子东东：
这是一个视口比例长度单位。
关于长度的详细介绍可到MDN开发者文档中查看。
这里简单说明以下：
vw 相对于视口的宽度，一个单位为百分之一视口宽度
vh 相对于视口的高度，一个单位为百分之一视口高度
vmin 相对于视口宽度和高度中较小的那个平均分为100份，一份为一个单位
vmax 相对于视口宽度和高度中较大的那个平均分为100份，一份为一个单位

言归正传，这样的话：

#container{
    width: 100vmin;
    height: 100vmin;
}
.attr {
    width: 50%;
    height: 50%;
    background-color: orange;
}

这样就可以得到跟屏幕的宽高比相同的容器尺寸了，然而这个方法局限性很大，都是以视口的宽高比为基准。

使用calc

calc()是CSS3的新特性，它的值可以是一个表达式。这里我们关心的是，calc() 中的百分比也是按照父容器的百分比来计算的。

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

通过设定padding-top 或 padding-bottom 来实现

这个方法跟第一个方法一样，都是我比较推荐的方法，我所采用的就是这个方法。
padding-top、padding-bottom 的百分比是根据父容器的width（宽度）计算的，而不是height（高度）。
比例对照表：

aspect ratio	padding-bottom value
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

<style>
.box{
    padding-bottom:56.25%;
    width:100%;
    position:relative;
}
.container{
    width:100%;
    height:100%;
    position:absolute;
}
</style>
<div class="col-xs-6"><!-- 父容器 -->
    <div class="box">
        <div class="container"></div>
    </div>\
</div>

这样，就完美实现了宽高比16:9 的比例。
但是，这样做了之后，里面再放上图表，再浏览器窗口尺寸变化之后，浏览器重新计算尺寸时，渲染有些许卡顿，可能比较考验gpu性能吧。不清楚，昨天试的时候，有一点卡顿，刚刚又试了一下感觉还是挺流畅的。