Javascript 为什么高度：0不能在css定义中工作

在我的项目中，我使用vue.js2，我有一个

img

组件

以下是它的代码：

<template>
<div class="banner">
  <img class="banner-img" :src="bannerImg"/>
</div>
</template>

<script>
export default {
  name: 'DetailBanner',
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position: relative
  overflow: hidden
  height: 0
  padding-bottom: 55%
  .banner-img
    width: 100%

导出默认值{
名称：'DetailBanner'，
道具：{
sightName:String，
横幅：字符串，
gallaryImgs：数组
}
}
.横幅
职位：相对
溢出：隐藏
身高：0
垫底：55%
.banner img
宽度：100%

img的url为：

这里我不想显示这个img，所以我在CSS中设置了height:0

但不幸的是，它失败了。我已经测试了删除高度：0，它显示了所有相同的结果

---

为什么高度：0无法工作，谁能帮助我？

您可以利用Vue.js并使用

v-if

显示/隐藏您的图像，如下所示：

<template> 
 <div class="banner"  v-if="showImg">
     <img class="banner-img" :src="bannerImg"/>
    </div>
 </template>

<script>
   export default {
      name: 'DetailBanner',
      props: {
         sightName: String,
         bannerImg: String,
         gallaryImgs: Array
      },
      data(){
         return{
            showImg:false
             }
       }

  }
</script>

导出默认值{
名称：'DetailBanner'，
道具：{
sightName:String，
横幅：字符串，
gallaryImgs：数组
},
数据（）{
返回{
showImg：错
}
}
}

---

您可以将

showImg

放在

道具中，这样您就可以只使用Vue.js更改图像状态，避免与CSS发生冲突
将您的img高度设置为100%或设置为“display:none；”（如果您希望完全隐藏）。然后将“display”设置为“none”，
display:none
。