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

标签 javascript html css

我正在制作画廊。单击图像时,它应该放大到 View 中心。现在点击事件会给图像这个类:

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

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

像这样(模型):

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

有什么好的方法吗?

最佳答案

一些解决方案

  • 添加 transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50 %;到 img

  • 添加 background-image + background-position:50% 50% + background-size 200% 200% + relative to the container & 移除 img

关于javascript - CSS3 缩放图像到容器中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19560927/

相关文章:

html - <!DOCTYPE html> 的声明不适用于 IBM MobileFirst 中的 Ionic ionic 导航 View

css - 如何防止长词破坏我的 div?

html - 背景图像悬停状态

php - Symfony2 和提交机智 JavaScript : How to get html content

javascript - Angularjs Controller 打破了我的表达

javascript - Uncaught Error : [$injector:modulerr] http://errors. angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error

html - 移动一张长图片,就像它用 css 闪烁一样

html - 删除 IE8 中选择元素内的多余填充

jquery - 粘性标题上的动画

javascript - 如何在 HighCharts 回调中访问 'this' 的不同上下文(Angular/Typescript)