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 - Flexbox 收缩而不是包裹

javascript - JS/HTML -- 动态创建带有选项的选择元素

javascript - 播放/暂停按钮离线工作但不在线

javascript - 在javascript中使用下一个和上一个按钮缩放图像

javascript - 将元素的类替换为另一个类

javascript - 我应该在不同的 iFrame 上包含相同的库吗?

css - firefox 3.6/mac os 中的网页布局问题

html - 在没有 flex 的情况下将 div 定位在 div 下方

javascript - 加载脚本和中断错误

javascript - 使用 jsPDF 从动态内容生成 PDF 时遇到问题