如何放大图片并保证宽高比不变？

使用 CSS 的 object-fit 属性

可以通过设置 object-fit 属性来确保图片在其容器中保持宽高比。这样，即使容器的大小发生变化，图片也会根据容器的大小适当地放大或缩小。

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="Image" class="responsive-image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url.jpg', // 替换为你的图片链接
    };
  },
};
</script>

<style>
.image-container {
  width: 300px;  /* 容器宽度 */
  height: 200px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持宽高比，同时裁剪 */
}
</style>

使用 CSS 的 background-image

另一种方法是使用 CSS 背景图像，并通过 background-size 属性来实现宽高比的保持。

<template>
  <div class="image-background"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url.jpg', // 替换为你的图片链接
    };
  },
};
</script>

<style>
.image-background {
  width: 300px;  /* 背景容器宽度 */
  height: 200px; /* 背景容器高度 */
  background-image: url('your-image-url.jpg'); /* 替换为你的图片链接 */
  background-size: cover; /* 保持宽高比，并覆盖整个容器 */
  background-position: center; /* 图片居中 */
}
</style>

使用 JavaScript 进行动态调整

如果你希望在图片放大时保持宽高比，可以通过 JavaScript 动态计算图片的宽高。

<template>
  <div class="image-container" :style="{ width: containerWidth + 'px', height: containerHeight + 'px' }">
    <img :src="imageUrl" alt="Image" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url.jpg', // 替换为你的图片链接
      containerWidth: 300,  // 容器宽度
      containerHeight: 200,  // 容器高度
      imageWidth: 0,
      imageHeight: 0,
    };
  },
  mounted() {
    this.resizeImage();
    window.addEventListener('resize', this.resizeImage);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeImage);
  },
  methods: {
    resizeImage() {
      const ratio = 1.5; // 设置放大比例
      this.imageWidth = this.containerWidth * ratio;
      this.imageHeight = this.containerHeight * ratio;
    },
  },
};
</script>

<style>
.image-container {
  overflow: hidden; /* 隐藏超出部分 */
}
</style>

以上方法可以有效地在 Vue 应用中实现图片的放大，同时保持宽高比。选择合适的方法取决于具体的需求和使用场景。如果只是简单的图片展示，使用 CSS 的 object-fit 或 background-image 方法会更为简单。而如果需要动态调整图片的大小，可以通过 JavaScript 来实现。