vue css如何将图片的等比缩放原来的0.5倍

在 Vue 中，可以使用以下代码将图片等比例缩小为原来的 0.5 倍：

<template>
  <div>
    <img :src="imageUrl" :style="{ width: imageWidth, height: 'auto' }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url',
      originalWidth: 0,
      imageWidth: 0,
    };
  },
  mounted() {
    this.getOriginalImageSize();
  },
  methods: {
    getOriginalImageSize() {
      const img = new Image();
      img.src = this.imageUrl;
      img.onload = () => {
        this.originalWidth = img.width;
        this.imageWidth = this.originalWidth / 2; // 缩小为原来的 0.5 倍
      };
    },
  },
};
</script>

在上述代码中，使用了动态绑定 `:src` 属性来加载图片，同时使用 `:style` 绑定一个对象来设置图片的样式。`width` 属性被设置为缩小后的宽度，`height` 属性被设置为 `'auto'`，以实现等比例缩放高度。

为了获取原始图片的宽度，可以在 `mounted` 钩子函数中使用 `new Image()` 创建一个新的图片对象，并在图片加载完成后获取图片的宽度。然后，可以将原始宽度除以 2，得到缩小后的宽度，并将其赋值给 `imageWidth` 数据属性。最后，将 `imageWidth` 绑定到图片的 `width` 属性中，即可实现等比例缩小图片。