Jquery和CSS图像居中在选项卡中不起作用

Jquery and CSS image centering not working in tab

本文关键字：选项 不起作用 CSS 图像 Jquery      更新时间：2023-09-26

我的图像在jquery选项卡中居中有问题。我从codepen.io创建了这个DEMO。如果单击我的DEMO页面，则会看到1.tab、2.tab和3.tab，其中有1.tab处于活动状态。1.选项卡图像居中工作，但如果单击2.Tab和3.Tab，则会看到图像居中不工作。我在这里需要做什么有人能帮我吗？

我正在使用img的css代码：

.img {
    float:left;
    width:310px;
    height:180px;
    overflow:hidden;
    }       
.img img {
 width:100%; 
  -webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
  -webkit-backface-visibility: hidden;
}
.img:hover img {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

不是：我认为这不是css问题

问题是tabify插件隐藏了所有非活动选项卡的列表元素（包括图像）。因此，当你测量图像以计算正确的位置时，图像的尺寸是(0,0)。

解决方法是等待所有图像加载完毕，然后应用tabify插件。

这就是我的意思：

$(document).ready( function() {
  var $imgs = $('.img img'),
      count = $imgs.length,
      counter = 0;
  $imgs
    .imgCentering({'forceSmart':true})
    .load(function() {
      counter++;
      if(counter === count) {
        $('#magtabs_').tabify(); 
      }
    })
})

您最好使用已经在imgCentering函数中定义的事件处理程序。这个代码片段是有效的，但它只是如何修复它的一个例子


以下是的工作示例

我看到您有一个用于居中的脚本，但问题是，它只为活动的一个获得正确的值，为其他的获得0。这会打乱左侧值和顶部值的计算。所以这更像是一个加载问题。。。

相关文章：