那些开源程序中让人叹为观止的代码 - 3 保持元素纵横比

本专栏尝试记录并分享一些我的在学习和使用开源程序代码的过程当中，经意或者不经意间看到的我的感受比较有参考价值的代码片断。我的感受，并非说能写或者能看得懂一些晦涩难懂的代码段子，就能够成为向别人炫耀的资本。本专栏无心炫技，其实也无技可炫。至于让某些牛人以为有些小儿科，我只能说，“您老太认真了”。

保持元素纵横比

解决问题：页面尺寸变化（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