今天做做图表过程中遇到一个问题，我的容器宽度都是使用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性能吧。不清楚，昨天试的时候，有一点卡顿，刚刚又试了一下感觉还是挺流畅的。
网友评论