前言
我们知道响应式布局中，元素的宽度可以随着浏览器窗口的宽度变化而变化，这时候元素只是宽度变化，高度通常情况下是不会随着变的，当内容高度有变化的时候，高度会随着内容而变化。
但有时候，我们需要元素的宽高比始终保持一致，这就麻烦了，有人说了，这肯定需要js来实时根据宽度计算高度，也就是注册window.onresize事件。然而，布局属于表现，让JS介入总觉得还是不甘心。
又有人说了，可以用ele {height: calc(width * 0.75)}来实现，假定需要保持4:3的比例。但是这段代码根本就不执行，根本就是错误的知识。
现在有一个简单的办法，和一个复杂的方法，可以实现这种需求。
padding-bottom: xx%大法
我们最终的要求很简单，就是宽高比锁定。虽然，并没有一种直接的css方法能帮你根据宽度值实时计算高度值，但是有一个属性接近这种需求，就是padding-bottom。
先看这个手册：http://www.runoob.com/cssref/pr-padding-bottom.html
% 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
先不考虑“此值不会如预期地那样工作于所有的浏览器中。”，因为现在任意一个浏览器都可以如预期的工作。padding-bottom的确实现了让元素的容器高度由元素的容器宽度决定。
现在我们的解决办法就是：
<body>
<style>
.inner {
height: 0;
padding-bottom: 25%;
overflow: hidden;
background-color: red;
}
</style>
<div style="width: 50%;">
<div class="inner">
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
</div>
</div>
</body>
现在，你可以调整你的浏览器的界面边界，拉大或者拉小，看看内部容器是不是始终在保持宽高比。
我推荐这种padding-bottom: xx%;大法。
底图大法
这种解决方案就是依靠一个img元素来负责撑起容器元素，img是媒体元素，它的特点是自带宽高，可以设置width: 100%; height: auto，这个时候auto的确会自动计算。
所以我们整体方案就是以img撑起元素，然后其他的元素设成absolute，宽高都是100%，就可以实现其他元素的即使有响应式变化也依然保持宽高比。
假设我们有一个可以自适应宽度的容器，如下。它必须是relative，且高度为auto。
<div class="col">
</div>
接着我们给它加入一个img元素，设一些style，注意，display: block非常重要，必须设置。
<div class="col">
<img style="display:block; width: 100%; height: auto;">
</div>
然后关键的问题就是这个图片是个啥。最佳的选择是，比如你要保持4:3的比例，元素大体上在400x300px的大小上，可大可小，那么你需要用ps做一张400x300px、png8的透明图片先。
做好之后，找一个图片转dataurl的工具，比如我随便找了一个http://www.mycodes.net/170/8897.htm ，这个就够用了。将我们做的图片转换成dataurl。如果你的网站需要考虑IE8和以下的浏览器访问，那么就存成一个实体图片然后引用就行了。
然后就是设置你真正的内容了：
<div class="col">
<img style="display: block; width: 100%; height: auto;">
<div style="position: absolute; top: 0; width: 100%; height: 100%;">
......
</div>
</div>
也就是说，img负责保持外层容器的宽高比，然后里面的div也充满容器，这样大家就都符合4:3的比例了。就算视口有变化，也一样能保持。
网友评论