Question

我正在尝试使用transform将图像缩放为fullsize。

这是我尝试计算顶部和位置的方法，它几乎可以工作，但翻译是基于图像的原始大小，而不是缩放的大小。我可以通过某种方式应用不同的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 + ')'

变换中的顺序是从右到左，因此将应用比例，之后翻译将是

缩放然后缩放到顶部？

1 个答案: