利用padding百分比，继承父级元素宽度，实现元素宽高比例缩放

我们可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为 item 元素的宽度是其父元素宽度的 21%，所以我们将 padding-bottom 设置为它的 1.618 倍，即 33.98%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

最后 item 元素的 CSS 样式为：

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

margin的百分比也是根据父级宽度而言