纯 CSS 实现高度与宽度成比例的效果

css代码如下：

.item {
  float: left;
  margin: 10px 5%;
  padding-bottom: 33.98%;
  width: 21%;
  height: 0;
}

效果： http://jsfiddle.net/luin/25BbH/7/

这个效果实现的关键是：

1、一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

2、height = 0 ，使元素的“高度”等于 padding-bottom 的值。