SOURCE

/*
实现元素宽高比为1：1.618
首先需要知道，一个元素的 padding，如果值是一个百分比，

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

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


*/

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

.item {
    float: left;
    width: 21%;
    margin: 10px 2%;
    height: 0;
    padding-bottom: 33.98%;
    background-color: #dbe0e4;
}