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

Question

我的图像在 jquery 选项卡中居中有问题。我创建了这个 DEMO 来自 codepen.io。如果您单击我的演示页面，您会看到 1.Tab 、 2.Tab 和 3.Tab 并且 1.Tab 处于事件状态。 1.Tab 图像居中有效，但如果您单击 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 问题。

Answer 1

问题是 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 函数中定义的事件处理程序。此代码片段有效，但它只是如何修复它的一个示例。

这是工作 example