In the previous article, we learned how we can update or change the src or URL of an image with a button click in Vue.js. In this tutorial, we’ll see how we can change with width and height of an image with numeric input values.

<template>
  <div>
    <h3>Vue 3 change image width and height with input values</h3>
    <input type="number" v-model="imageWidth" inputmode="numeric" />
    <input type="number" v-model="imageHeight" inputmode="numeric" />
    <div class="np-img-container">
      <img
        src="https://picsum.photos/id/1/500/400"
        :style="{
          height: `${imageHeight}px`,
          width: `${imageWidth}px`,
        }"
      />
    </div>

  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      imageWidth: 500,
      imageHeight: 400,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.np-img-container {
  margin: 20px 0;
}
</style>

Code language: HTML, XML (xml)

In the above code, we have 2 input fields with v-model to reactive states imageWidth and imageHeight on line numbers 4 and 4 respectively.

We’ve then bound these values to the custom dynamic styling of the img element on line numbers 10 and 11 respectively.

Now, whenever we change these values using the input fields, the width and height of the image will also get updated.

Here’s what the above example would look like in action:

You can find a working version of the above example from my repo links below:

Codesandbox / Demo | Github