CSS3缩放图像到容器中心

Question

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

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

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

像这样（样机）：

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

有什么好的方法吗？

Answer 1

一些解决方案

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

• 添加背景图片+背景位置：50％50％+背景尺寸200％200％+相对于容器并删除img

Answer 2

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