请问老师为什么wrapper下面留了道缝隙？

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

代码段先是swiper.vue后事icon.vue

<template>
<div class="wrapper">
<swiper :options="swiperOptions">
<swiper-slide v-for='item of swiperList' :key='item.id'>
<img class="swiper-img" :src="item.imgUrl"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>

</div>
</template>
<script>
export default{
name:'HomeSwiper',
//在子组件里定义data，data一定是函数，以下是es6写法
data (){
return {
swiperOptions:{
pagination:'.swiper-pagination',
//支持循环轮播
loop:true
},
swiperList:[{
id:'0001',
imgUrl:"https://imgs.qunarzz.com/vs_ceph_vcimg/7176acd77332a433af9636eb9a2c338c.jpeg"
},{
id:'0002',
imgUrl:"https://imgs.qunarzz.com/vs_ceph_vcimg/b8c4527c41649814cc4cf86880abba54.jpeg"
}]
}
}
}
</script>
<style scoped>
.wrapper >>>.swiper-pagination-bullet-active
background:#fff
.wrapper
overflow:hidden
width:100%
height:0
padding-bottom:31.2%
//图片加载前显示一个灰色背景
background:#eee
// .swiper-pagination-bullet-active
// background:#fff
.swiper-img
width:100%
</style>

<template>

<div class="icons">

</div>
</template>

<script>
export default {
name:'HomeIcons'
}
</script>

<style scoped>
.icons
//属性值不能加引号I
overflow:hidden
height:0
padding-bottom:50%
background:green
</style>

张月白 2020-11-25

源自：项目-首页开发 2-7 Vue项目首页 - 图标区域页面布局

收起

2回答

好帮手慕久久回答被采纳获得+3积分 2020-11-25 15:52:37

同学你好，这里是一个小技巧，记住怎么用就行。具体如下：
padding-bottom是参考父元素的宽度来计算的：如果父元素是100px宽，那么padding-bottom：31.25%；就等价于padding-bottom：31.25px；。由于图片的宽高比是固定的，所以只要让wrapper的宽高比与图片一致就可以让二者在页面上一样大，即为了让wrapper和图片一样大，所以利用了图片的宽高比，设置了padding-bottom。

祝学习愉快！

收起回答

好帮手慕久久 2020-11-25 15:30:47

同学你好，由于同学使用的图片“高度/宽度”不等于31.25%，所以wrapper的高度不合适，从而出现了空隙：

由于同学的图片是945*288的，即高/宽=30.476%，所以需要将wrapper的高度调整成30.476%：