目的:创建一个宽高比为2:1的区域,且子元素占1/8
<template>
<div class="icons">
<div class="icon"></div>
</div>
</template>
<script>
export default {
name: 'HomeIcons'
}
</script>
<style lang="stylus" scoped>
// 创建一个宽高比为2:1的区域
.icons
overflow hidden
height 0
// 总宽度的50%
padding-bottom 50%
background green
.icon
float left
// 总宽度的25%
width 25%
height 0
// 总宽度的25%
padding-bottom 25%
background red
</style>
核心就是利用 height: 0;
和 padding-bottom: 50%;
来控制当宽一定时,高的长度!