图片不变形，宽高不超出父元素的情况下旋转图片

/* 图片的父元素 */
.img-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

function getImgSize (src) {
  return new Promise(function (resolve, reject) {
    $('<img/>', {
      load: function () {
        resolve({
          width: this.width,
          height: this.height
        })
      },
      src: src
    })
  })
}

let $imgWrap = $('.img-wrap')
let wrapSize = {
  width: $imgWrap.width(),
  height: $imgWrap.height()
}

// this.imgSizeInfo 存旋转 (2n * 90) 度和旋转 ((2n + 1) * 90) 度的宽高
let imgRatio = imgSize.width / imgSize.height
let imgW = wrapSize.width
let imgH = imgW / imgRatio
if (imgH < wrapSize.height) {
  this.imgSizeInfo.push([wrapSize.width + 'px', 'auto'])
} else {
  this.imgSizeInfo.push(['auto', wrapSize.height + 'px'])
}
// 旋转((2n + 1) * 90) 度后
imgW = wrapSize.height
imgH = imgW / imgRatio
if (imgH < wrapSize.width) {
  this.imgSizeInfo.push([wrapSize.height + 'px', 'auto'])
} else {
  this.imgSizeInfo.push(['auto', wrapSize.width + 'px'])
}

rotate: function (degree) {
  this.rotateDegree += degree
  this.styleObject.transform = `rotate(${this.rotateDegree}deg)`
  if (this.rotateDegree % 180 === 0) {
    this.styleObject.width = this.imgSizeInfo[0][0]
    this.styleObject.height = this.imgSizeInfo[0][1]
  } else {
    this.styleObject.width = this.imgSizeInfo[1][0]
    this.styleObject.height = this.imgSizeInfo[1][1]
  }
}

<div class="target-wrap">
  <div class="img-wrap">
    <img src="demo.png" alt="" class="target" :style="styleObject">
  </div>
  <a href="javascript:void(0);" class="target-left-control" @click="rotate(-90)">左转90度</a>
  <a href="javascript:void(0);" class="target-right-control" @click="rotate(90)">右转90度</a>
</div>