vue图片旋转后超出容器

在Vue.js中，如果你遇到图片旋转后超出容器的问题，通常是因为你在处理图片旋转时没有同步更新其宽度和高度，导致旋转后的尺寸计算错误。以下是解决这个问题的一般步骤：

1. **设置图片容器**：首先，你需要为图片设置一个限定宽度和高度的容器，并确保它有一个固定的布局，如`display: flex` 或 `position: relative`，以便你可以控制旋转后的图片位置。

<div class="image-container" style="position: relative; width: 300px; height: 300px;">
  <img :src="yourImageSrc" :style="{ transform: 'rotate(' + rotateDegree + 'deg)' }"/>
</div>

2. **监听旋转角度变化**：当图片旋转角度改变时，需要动态计算新的宽高。可以创建一个计算方法，比如`calculateNewDimensions(rotateDegree)`，来调整图片的样式属性。

data() {
  return {
    rotateDegree: 0,
    imageWidth: null,
    imageHeight: null,
  };
},
methods: {
  calculateNewDimensions(degree) {
    const radian = degree * Math.PI / 180;
    let rotatedWidth = this.imageWidth * Math.abs(Math.cos(radian));
    let rotatedHeight = this.imageHeight * Math.abs(Math.sin(radian));
    
    // 如果图片高度比宽度更短，交换宽高
    if (rotatedWidth > rotatedHeight) {
      [rotatedWidth, rotatedHeight] = [rotatedHeight, rotatedWidth];
    }
    
    return { rotatedWidth, rotatedHeight };
  },
}

3. **更新图片样式**：每次旋转后，调用`calculateNewDimensions()`方法，然后将结果应用到图片上：

watch: {
  rotateDegree(newDegree) {
    const { rotatedWidth, rotatedHeight } = this.calculateNewDimensions(newDegree);
    this.$refs.img.style.width = `${rotatedWidth}px`;
    this.$refs.img.style.height = `${rotatedHeight}px`;
  },
},

在这个例子中，`$refs.img`假设你的图片元素有一个ref名叫做`img`。记得在模板中绑定ref：

<img ref="img" :src="yourImageSrc" :style="{ transform: 'rotate(' + rotateDegree + 'deg)', width: '', height: '' }"/>