vue set img height based on width with dynamic styling

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?

Roy J · Accepted Answer · 2017-12-25 23:12:10Z

10

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>

answered Dec 25, 2017 at 23:12

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dazzle · Accepted Answer · 2018-12-06 10:13:25Z

1

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);
    }
}

answered Dec 6, 2018 at 10:13

Dazzle

3,1254 gold badges31 silver badges53 bronze badges

1 Comment

www.admiraalit.nl Over a year ago

Quotes are missing around { height: myComputedHeight + '%' }

Pablo · Accepted Answer · 2021-03-11 14:06:56Z

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

Collectives™ on Stack Overflow

vue set img height based on width with dynamic styling

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related