해상도에 따라 이미지 사이즈가 변경되게 하려면, resize 이벤트를 이용하여 해상도의 크기를 구하고 그에 따라 다시 출력하고자 하는 이미지의 크기를 설정해준다.

html

<div id="app" :style="customStyle">
  <div class="image-wrapper" :style="customStyle">
    <img :src="imageUrl">
  </div>
  <div class="rectangle-wrapper" :style="customStyle">
    <div class="rectangle" :style="styleObject(position)"></div>
    </div>
</div>

javascript

var app = new Vue({
  el: '#app',
  data () {
      return {
        imageSize: { width: 580, height: 400 },
        imageUrl: 'https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg',
        position: {x: 8, y: 20, w: 16.6291, h: 33.0335}
      }
  },
  computed: {
    isResultEmpty () {
      const obj = this.positionList
      return !obj.length || (obj.length === 1 && this.isObjectEmpty(this.positionList[0]))
    },
    customStyle () {
      return {
        maxWidth: this.imageSize.width + 'px',
        maxHeight: this.imageSize.height + 'px',
        width: this.imageSize.width + 'px',
        height: this.imageSize.height + 'px'
      }
    }
  },
  methods: {
    styleObject (obj) {
      let mig = (val) => { return `${val}%` }
      return {
        left: mig(obj.x),
        top: mig(obj.y),
        width: mig(obj.w),
        height: mig(obj.h)
      }
    },
    isObjectEmpty (obj) {
      return !Object.values(obj).some(x => x > 0)
    },
    setImageSize () {
      let el = document.documentElement.querySelector('body')
      let style = window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle
      // padding은 빠진 넓이를 구함
      let paddingWidth = parseInt(style.paddingLeft) + parseInt(style.paddingRight)

      let pageContentWidth = el.clientWidth - paddingWidth
      // 검출 결과 이미지 사이즈 정의
      let baseSize = pageContentWidth / 2
      this.imageSize = {
        width: baseSize,
        height: baseSize * 0.7
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      window.addEventListener('resize', this.setImageSize)
      // init
      this.setImageSize()
    })
  }
});

css

body {
  padding: 1rem;
}
#app {
  position: relative;
  background-color: #eee;
  .image-wrapper img {
    width: 100%;
    height: 100%;
  }
  .rectangle-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    .rectangle {
      position: absolute;
      border: solid 2px #FF1744;
    }
  }
}

실행 결과

See the Pen mxJbyr by gloria (@gloriaJun) on CodePen.

Reference