Aspect Ratio Relative resize paradox?

by Admiral Potato

HTML

<div id="container">
  <div class="multi">
    <resizey-doo
      :width="800"
      :height="600"
      key="a"
    ></resizey-doo>
    <resizey-doo
      :width="500"
      :height="900"
      key="b"
    ></resizey-doo>
  </div>
</div>

SCSS

.resizey-doo {
  position: relative;
  border: 1px solid #f00;
  background-color: rgba(255,255,255, 0.25);
  overflow: hidden;

  & +.resizey-doo {
    margin-top: 16px;
  }
  
  img {
    position: relative;
    width: 100%;
    height: auto;
  }

  .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 3rem;
  }
}

JavaScript

Vue.component('resizey-doo', {
	template: `
  	<div
    	class="resizey-doo"
      :style="computedPaddingAspectRatio"
    >
      <div
      	class="overlay"
      >{{cHeight}} x {{cWidth}}</div>
    </div>
  `,
  data () {
	  return {
    	imageData: '',
      cWidth: 0,
      cHeight: 0
    }
  },
  props: {
  	width: Number,
  	height: Number
  },
  mounted () {
    this.resize()
  },
  computed: {
	  computedPaddingAspectRatio () {
    	return {
      	paddingTop: (this.height / this.width) * 100 + '%'
      }
    },
	  computedSize () {
	    return {
        width: this.cWidth + 'px',
        height: this.cHeight + 'px'
      }
    }
  },
  methods: {
  	resize () {
    	requestAnimationFrame(this.resize)
      this.cWidth = this.$el.clientWidth
      this.cHeight = this.$el.clientHeight
    }
  }
})

var app = new Vue({
	el: '#container'
})