Масштабировать, а затем масштабировать до вершины?

Question

Я пытаюсь использовать преобразование для масштабирования изображения в полноэкранном режиме.

Вот как я пытаюсь рассчитать верх и положение, оно почти работает, но перевод основан на исходном размере изображений, а не на размере. Могу ли я решить эту проблему, применив различные css каким-то образом или мне нужно выяснить другое значение перевода?

transformCarousel() { 
    if (this.state.zoom) { 
     const heightBefore = this.state.carousel.height 
     const heightAfter = window.innerHeight * 0.792 
     const scale = heightAfter/heightBefore 
     const posBefore = this.state.carousel.top 
     const posAfter = window.pageYOffset 
     const translate = posAfter - posBefore 
     return { 
     zIndex: 1070, 
     transform: 'scale(' + scale + ') translateY(' + translate + 'px)' 
     } 
    } 
    } 

Answer 1

Я просто догадываюсь, что это за проблема.

Кажется, что значение px для перевода должно быть в конечном масштабе, а не в начале шкалы.

Этот код будет сделать это:

transform: 'translateY(' + translate + 'px) scale(' + scale + ')' 

Порядок преобразований справа налево, поэтому масштаб будет применяться и после этого переводить будет