スケールを調整し、次にスケールする？

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 + ')' 

変換における順序は右から左にあるので、スケールが適用され、この後に何を理解することは本当に難しいです