vue set img height based on width with dynamic styling - vue.js

Question

I have an image that should have 50% height of its width.
<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
}
Unfortunately image is undefined during the evaluation of imageHeight and it does not get reevaluated when the width changes. Is there some way to make it work with a watcher or some other way?

Answer 1

You can use the load event to set a variable. It looks like you're using a computed, but there's no data change for it to respond to.
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>

Answer 2

You could also do
<div :style={ height: myComputedHeight + '%' }></div>
data() {
return {
myCount: 10,
myTotal: 100
};
},
computed: {
myComputedHeight() {
return Math.round((this.myCount / this.myTotal) * 100);
}
}

Answer 3

I had to find a solution to something similar making a square 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>
In this cas you have to watch out for borders present in your $refs.box that could vary the result.
If you need the height to be the half of the width try:
calc(${this.matchedWidth} * 0.5)px on the computed style property.
Hope it helps! BR