CSS3缩放图像到容器的中心

Question

我正在画廊。单击图像时，应该放大到视图中心。现在，click事件将为此类提供图像：

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

看起来很好，图像会放大。但我想让它放大到容器的中心，无论图像从哪里开始。

喜欢这个（样机）：

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

有没有好办法呢？

Answer 1

一些解决方案

• add transform-origin：50％50％; - moz-transform-origin：50％50％; - ms-transform-origin：50％50％; - webkit-transform-origin：50％50 ％;到img

• 添加背景图像+背景位置：50％50％+背景尺寸200％200％+相对于容器＆amp;删除img

Answer 2

创建 div 并将其设置为 background-image 。使用CSS将 div 的背景位置设置为 center 。从那里你应该能够创建一个放大缩小效果，而不会偏移。希望这有帮助！