保持元素纵横比

保持元素纵横比

解决问题：页面尺寸变化（resize）时保持页面元素纵横比

开源程序：Bootstrap

经常，我们会遇到这样的需求，需要保持页面上某些元素在页面大小被改变重新渲染的时候，保持该元素区域的纵横比不变。最常见的场景，比如页面上显示图片的时候，希望始终保持图片的纵横比，哪怕图片以缩略图显示。或者，在页面上嵌入一段视频的时候，希望嵌入的这个元素区域始终保持16:9或者4:3的比例。

在Twitter的开源前端框架中，专门针对后边一个场景做了处理。

先看页面使用代码：

<!-- 16:9 aspect ratio --><div class="embed-responsive embed-responsive-16by9">  <iframe class="embed-responsive-item" src="…"></iframe></div><!-- 4:3 aspect ratio --><div class="embed-responsive embed-responsive-4by3">  <iframe class="embed-responsive-item" src="…"></iframe></div>

这里比较值得一提的就是样式类embed-responsive-4by3和embed-responsive-16by9的实现。看CSS代码：

.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object {  position: absolute;  top: 0;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  border: 0;}.embed-responsive.embed-responsive-16by9 {  padding-bottom: 56.25%;}.embed-responsive.embed-responsive-4by3 {  padding-bottom: 75%;}

这里通过巧妙的使用padding-bottom这个属性，来保持元素的纵横比。比如embed-responsive-4by3，就是将width设置为100%，然后将padding-bottom设置为4:3对应的百分比，也就是75%就可以了。

这应该算是一个CSS Hack了。有很多人对其做过一些研究和讨论，一并列出供参考：

http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about

http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div

其中提到一个简单的示例程序，可以更容易看到其欲实现的效果：

http://jsbin.com/eqeseb/2/edit