vue中图片等比例放大

在Vue中，可以使用style属性和计算属性来实现图片的等比例放大。首先，可以在data中定义一个变量来存储图片的缩放比例，例如scale。然后，在template中，绑定该变量到图片的style属性上，并使用transform属性来实现缩放功能。具体步骤如下：

1. 在data中定义一个变量scale，并设置默认值为1。
2. 在template中，将该变量绑定到图片的style属性上，并使用transform属性设置缩放比例。
3. 使用计算属性来根据缩放比例动态计算图片的宽高。
4. 在计算属性中使用style属性和缩放比例来计算图片的宽高，并返回一个对象包含宽度和高度。
5. 在template中，使用计算属性来设置图片的宽高。

示例代码如下：

<template>
  <div>
    <img :src="imageUrl" :style="{'transform': 'scale(' + scale + ')'}" :width="imageSize.width" :height="imageSize.height">
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      imageUrl: 'path/to/your/image.jpg'
    }
  },
  computed: {
    imageSize() {
      const width = this.originalWidth * this.scale;
      const height = this.originalHeight * this.scale;
      return {
        width,
        height
      };
    }
  },
  mounted() {
    // 获取原始图片的宽高
    const img = new Image();
    img.src = this.imageUrl;
    img.onload = () => {
      this.originalWidth = img.width;
      this.originalHeight = img.height;
    };
  }
}
</script>

在上述代码中，我们使用了一个计算属性imageSize来动态计算图片的宽高，然后在template中使用了该计算属性来设置图片的宽高。同时，我们还在mounted钩子中获取了图片的原始宽高，以便后续计算缩放比例时使用。

请根据实际需求对上述代码进行适当的修改和调整。