Увеличение блока с верху по левому краю родителя

Question

каким образом можно делать увеличение блока так, что бы блок не центрировался, а был в начале родителя? Собственно легче показать, чем объяснить. Кидаю код ниже. Когда увеличиваю через scale то он центрируется, да еще и не скролится. Каким образом можно это добиться? Мне надо увеличивать не только размер шрифта, а сам блок, там всякие картинки, узоры и все такое будет, это на всякий случай.

new Vue({
    el:"#app",
    data: {
        updateMe: '',
        range: '1',
    },
    watch: {
      range(val) {
        // console.log(this.range)
        const zoomerBlock = this.$refs.zoomerBlock
        const zoomerInput = this.$refs.zoomerInput
        console.log(zoomerBlock)
        console.log(zoomerInput)
        zoomerBlock.style.transform = `scale(${val})`;
      }
    },
    mounted() {
    },
    method: {
    }
});

.zoomer {
  width: 100px;
  height: 100px;
  overflow: auto;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
  <div id="app">
    <div class="zoomer">
      <div ref="zoomerBlock">рандомный блок</div>
    </div>
    <input type="range" min="1" max="5" v-model="range" step="0.1" id="zoomer" ref="zoomerInput"> {{ range }}
    <label for="zoomer">Volume</label>
  </div>

</body>

Answer 1

new Vue({
    el:"#app",
    data: {
        updateMe: '',
        range: '1',
    },
    watch: {
      range(val) {
        // console.log(this.range)
        const zoomerBlock = this.$refs.zoomerBlock
        const zoomerInput = this.$refs.zoomerInput
        console.log(zoomerBlock)
        console.log(zoomerInput)
        zoomerBlock.style.transform = `scale(${val})`;
      }
    },
    mounted() {
    },
    method: {
    }
});

.zoomer {
  width: 100px;
  height: 100px;
  overflow: auto;
  background: red;
}

.zoomer div {
    transition:transform 400ms;
    transform-origin:top left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
  <div id="app">
    <div class="zoomer">
      <div ref="zoomerBlock">рандомный блок</div>
    </div>
    <input type="range" min="1" max="5" v-model="range" step="0.1" id="zoomer" ref="zoomerInput"> {{ range }}
    <label for="zoomer">Volume</label>
  </div>

</body>

БЛОГ НА HUSL

Увеличение блока с верху по левому краю родителя

Ответы (1 шт):