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

.item {
  float: left;
  margin: 10px 2%;
  width: 21%;
}

看完别人的讲解我觉得重点是理解的是padding这个属性，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

意思也就是说，padding的高和宽 都是对于父类元素的宽。

借用别人网站事例，效果如下图：

效果页面：http:///luin/25BbH/7/