Javascript CSS3将图像缩放到容器中心

我在做画廊。单击图像时，应将其放大到视图中心。现在，单击事件将为图像提供以下类：

.imgFocus
{
    transition  : All 1s ease;
    transform   : scale(2); 
}

看起来不错，图像放大了。但我希望它放大到容器的中心，不管图像从哪里开始

像这样（模型）：

有什么好办法吗？

一些解决方案

• 添加变换原点：50%50%-moz变换原点：50%50%-ms转换来源：50%50%-webkit转换来源：50%50%；给img

• 添加背景图像+背景位置：50%50%+相对于容器的背景大小200%200%+并移除img

---

创建一个div并将其设置为具有背景图像。使用CSS将该div的背景位置设置为center。从那里，您应该能够创建一个放大缩小效果，而无需偏移。希望这有帮助

这是你想要的缩放吗？对缩放的效果和我想要的一样。我只是想让变换也把图像放在容器的中心。你是说图像的左上角应该在容器的中心？或者图像的中心应该在其容器的中心？中心应该在中心。有点像灯箱，但我只想用平移。它已经居中了，我不知道你的意思。你用的是什么浏览器？你有额外的css吗？请提供一个JSFIDLE或一些代码。

.imgFocus
{
    transition: All 1s ease;
    transform: translate( 'containerCenter' ) scale(2); 
}