vue图片旋转后超出div如何解决

在Vue中，如果你遇到图片旋转后超出容器（div）的问题，可以尝试以下几种解决方案：

1. **CSS调整**：
- 使用`transform-origin`属性设定旋转中心点。例如，如果你想让图片在左上角旋转而不超出容器，设置`transform-origin: top left;`
- 使用`max-width`和`max-height`限制图片的最大尺寸，防止旋转后的图片过大。

.container {
  overflow: hidden;
}

.image-container {
  position: relative;
  transform-origin: top left;
}

.rotate-image {
  transform: rotate(90deg);
  max-width: 100%;
  max-height: 100%;
}

2. **JavaScript计算大小**：
- 如果需要动态调整，可以计算旋转后的实际尺寸并更新样式。你可以使用Vue的计算属性（computed property）来做这个计算。

data() {
  return {
    rotatedSize: { width: 0, height: 0 }
  };
},
methods: {
  calculateRotatedSize(originalWidth, originalHeight) {
    // 计算旋转后的尺寸
    const newWidth = originalHeight;
    const newHeight = originalWidth;
    return { width: newWidth, height: newHeight };
  },
  onRotate() {
    const size = this.calculateRotatedSize(this.originalImage.width, this.originalImage.height);
    this.$refs.imageContainer.style.maxWidth = `${size.width}px`;
    this.$refs.imageContainer.style.maxHeight = `${size.height}px`;
  }
},
mounted() {
  this.onRotate();
}

然后在HTML中绑定旋转事件和ref：

<div ref="imageContainer" class="image-container">
  <img :src="originalImage" @rotate="onRotate" :style="{ transform: 'rotate(90deg)' }" />
</div>