Edit in JSFiddle

  const vm = new Vue({
    el: "#app",
    data: {s: 1.0, x: 0, y: 0, a: 0, c: "#ADFF2F", b: 64},
    computed: {
      transform: function() { return `scale(${this.s}) translate(${this.x}px, ${this.y}px) rotate(${this.a}deg)` },
    },
  })
<div id="app">
  <div class="avatar" :style="{background: c, borderRadius: `${b}px`}">
    <img :style="{transform: transform}" src="https://user-images.githubusercontent.com/4289625/38862018-d8d63a30-426e-11e8-832f-a3a437dd5aaf.png" alt="Animal hamster" />
  </div>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-2 control-label">ズーム</label>
      <div class="col-md-10">
        <input type="range" v-model="s" min="0.5" max="3.0" step="0.001" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">スライド</label>
      <div class="col-md-10">
        <input type="range" v-model="x" min="-128" max="128" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">上下</label>
      <div class="col-md-10">
        <input type="range" v-model="y" min="-128" max="128" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">回転</label>
      <div class="col-md-10">
        <input type="range" v-model="a" min="-180" max="180" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">背景色</label>
      <div class="col-md-10">
        <input class="form-control" type="color" v-model="c" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">枠の丸み</label>
      <div class="col-md-10">
        <input type="range" v-model="b" min="0" max="160" />
      </div>
    </div>
  </div>
</div>
  @charset "UTF-8";
  .avatar {
    margin: auto auto 2em auto;
    width: 320px;
    height: 320px;
    overflow: hidden;
    /* 中央配置のため */
    display: flex;
    align-items: center;
  }
  .avatar img {
    margin: 0 auto;
    /* 比率維持のため縦横の「片方だけ」 */
    width: inherit;
  }