javascript - CSS3将图像缩放到容器中心

Question

我正在做一个画廊。单击图像时，它应该放大到视图中心。现在点击事件会给图像这个类：

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

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

像这样（样机）：

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

有什么好的方法吗？

score 0 · Accepted Answer

一些解决方案

添加变换源：50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%; 到img
添加背景图像 + 背景位置：50% 50% + 背景大小 200% 200% + 相对于容器并删除 img

score 0 · Accepted Answer

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

2 回答 2