vue使用动态样式设置基于宽度的img高度

时间:2017-12-25 21:26:32

标签: vue.js

我的图像应该有50%的宽度高度。

<img :src="post.image" ref="image" :style="{ height: imageHeight + 'px' }" />

imageHeight() {
            let image = this.$refs.image
            if(!image) return 0
            let height = image.clientWidth * 0.5
            return height
        }

不幸的是,在评估imageHeight期间图像未定义,并且在宽度更改时不会重新评估图像。有没有办法让它与观察者或其他方式一起工作?

3 个答案:

答案 0 :(得分:5)

您可以使用load event设置变量。看起来你正在使用计算机,但它没有数据变化来响应。

new Vue({
  el: '#app',
  data: {
    url: 'http://via.placeholder.com/200x200',
    imageHeight: null
  },
  methods: {
    setheight(event) {
      let image = event.target;
      this.imageHeight = image.clientWidth * 0.5;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <img :src="url" @load="setheight" :style="{ height: imageHeight + 'px' }">
  <div>{{imageHeight}}</div>
</div>

答案 1 :(得分:0)

您也可以这样做

<div :style={ height: myComputedHeight + '%' }></div>

data() {
  return {
     myCount: 10,
     myTotal: 100
  };
},

computed: {
    myComputedHeight() {
        return Math.round((this.myCount / this.myTotal) * 100);
    }
}

答案 2 :(得分:0)

我必须找到类似制作方形 div 的解决方案。

new Vue({
    el: "#app",
    data: {
        initialWidth: 100,
        matchedWidth: null
    },
    mounted() {
        this.matchWidth();
    },
    methods: {
        matchWidth() {
            this.matchedWidth = this.$refs.box.offsetWidth;
        }
    },
    computed: {
        igCardStyle() {
            return {
                width: `${this.initialWidth}%`,
                height: `${this.matchedWidth}px`
            };
        }
    }
});
.box-wrapper {
    width: 200px;
}

.box {
    background-color: red;
/*  border: 1px solid black; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="app">
    <div class="box-wrapper">
    <div class="box" :style="igCardStyle" ref="box">
    </div>
        </div>
<hr>
    <p>width: {{initialWidth}}% of .box-wrapper or {{matchedWidth}}px</p>
    <p>height: {{matchedWidth}}px</p>
</div>

在这种情况下,您必须注意 $refs.box 中可能会改变结果的边框。

如果您需要高度为宽度的一半,请尝试: calc(${this.matchedWidth} * 0.5)px 在计算的样式属性上。

希望有帮助! BR