我们可以使用 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的百分比也是根据父级宽度而言