为什么 height: 0 在 css 定义中不起作用答案

【问题标题】：Why height: 0 can not work in css definition为什么 height: 0 在 css 定义中不起作用
【发布时间】：2018-09-14 01:54:39
【问题描述】：

在我的项目中，我使用 vue.js 2，并且我有一个 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%

img的网址是：

http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg

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

但不幸的是，它失败了。我已经测试了删除高度：0，它显示的都是一样的。

为什么 height:0 不行，谁能帮帮我？

【问题讨论】：

给你的img高度：100%
或者设置为“display: none;”如果您希望它完全隐藏。
然后将 'display' 设置为 'none' ，display:none.

标签： javascript css vue.js vuejs2

【解决方案1】：

您可以利用 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>

您可以将showImg 放在您的props 中，这样您就可以仅使用 Vue.js 更改图像状态并避免与 CSS 发生冲突

【讨论】：