How to correctly rotate an image when enlarged?

Question

Vue.js

Good afternoon. There is the following code. When the picture is enlarged, it works normally and does not go beyond the boundaries of the content, and it can be moved in different directions and viewed in its entirety. But when turning, problems begin and the picture crawls out of the area. Can someone tell me how to make the rendering happen correctly and the picture, when rotated, is drawn in the center and does not go beyond the area. Thanks in advance))

<template lang="pug">
div
  div(
    ref="border1" 
    class="main-border"
    @mousedown="mousedown($event)"
    @mousemove="moveAt"
    @mouseup="mouseup"
    @mouseleave="mouseleave"
    :style="{border: '1px solid #000'}"
    )
    img(
      ref="map"
      img src="@/assets/img.png"
      :style="style"
    )
  div
  br
  div 
    v-btn(@click="zoomIn") Увеличить
    v-btn(@click="zoomOut") Уменьшить
    v-btn(@click="transformImg") Поворот
    div {{changeSize}}
    div {{transform}}
</template>

<script>



export default {
  name: 'Test',
  data() {
    return {
      left: 0,
      top: 0,
      x: 0,
      y: 0,
      dragging: false,
      zoomPlus: 100,
      transform: 0,
      changeSize: false,
      changeLeft: 0,
      number: 0,
      numberNew: 0,
      first: 0,
      firstNew: 0,
      position: 'static',
      inter: false
    }
  },
  computed: {
    style () {
      return { 
        width: `${this.zoomPlus}%`, 
        position: `${this.position}`, 
        transform: `rotate(${this.transform}deg)`, 
        left: `${this.left}`, top: `${this.top}` 
      }
    }
  },
  methods: {
    mousedown (event) {
      event.preventDefault()
      this.x = event.pageX
      this.y = event.pageY
      this.dragging = true
      this.moveAt(event)  
    },
    moveAt (event) {
      if (this.dragging) {
        let block = this.$refs.map

        

        let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
        let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()

        let test

        if (heightImg > widthImg) {
          test = (heightImg - widthImg)/2
        }
        
        if (heightImg > heightCont) {
        block.style.top = this.changeSize 
                          ? Math.max(0 - (heightImg - heightCont - test) , Math.min(this.top + event.pageY - this.y, test)) + 'px'
                          : Math.max(0 - (heightImg - heightCont) , Math.min(this.top + event.pageY - this.y, 0)) + 'px'
        }


        if (widthImg > widthCont) {
          block.style.left = this.changeSize 
              ? Math.max(0 - (widthImg - widthCont), Math.min(this.left + event.pageX - this.x, 0)) + 'px'
              : Math.max(0 - (widthImg - widthCont) , Math.min(this.left + event.pageX - this.x, 0)) + 'px'
        }


      }
    },
    zoomIn () {
      let { left, top } = this.$refs.map.style
      this.zoomPlus += 50
      this.position = 'absolute'



      let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
      let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()




      this.first = widthCont/4
      this.number -= this.first
      this.left = this.number + 'px'


      this.firstNew = heightCont/4
      this.numberNew -= this.firstNew
      this.top = this.numberNew + 'px'

    },
    zoomOut () {
      let { left, top } = this.$refs.map.style
      this.zoomPlus -= 50

      
      this.number += this.first
      this.left = this.number + 'px'


      
      this.numberNew += this.firstNew
      this.top = this.numberNew + 'px'


    },
    transformImg () {
      let { left, top } = this.$refs.map.style

      
      let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
      let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()


      this.transform -= 90


      this.first = widthCont/4
        this.number -= this.first
        


        this.firstNew = heightCont/4
        this.numberNew -= this.firstNew
        if (this.transform === -90 || this.transform === -270) {
        this.changeSize = true

        this.left = this.numberNew + 'px'
        this.top = this.number + 'px'
        

        

        } else if (this.transform === -180){
          this.changeSize = false

          this.left = this.number + 'px'
          this.top = this.numberNew + 'px'


        } else {
          this.changeSize = false
          this.left = this.number + 'px'
          this.top = this.numberNew + 'px'
        }

      if (this.transform <= -360) this.transform = 0
 

    },
    mouseup () {
      this.dragging = false
      let block = this.$refs.map
      this.left = parseFloat(block.style.left)
      this.top = parseFloat(block.style.top)
    },
    mouseleave () {
      this.mouseup()
    }
  }
}
</script>

<style scoped lang="less">
.main-border {
  margin: auto;
  overflow: hidden;
  width: 1000px;
  height: 500px;
  border: 0px solid #663333;
  position: relative;
  display: flex;
  align-items: center;
}
.main-border img{
  height:  auto;
  width: 100%;
  margin: 0 auto;
  right: 0;
  bottom: 0;


}
</style>