javascript - jquery根据图像的宽度将css类应用于图像

Question

我有一个 770 像素宽的 div。由于周围的元素，我需要让 div 中的图像向左浮动。我需要将宽度小于 770 像素的图像居中。有些图片只有 300 像素宽，因此无法拉伸(stretch)和裁剪它们。

是否可以将一个类应用于所有与 jquery 脚本相关的 slider 图像，如果原始图像宽度小于 770px，则将此 css 类应用于它。然后那个类(class)会让他们的形象居中。

这看起来很容易修复，但我无法完全理解它。

Here is a jsfiddle where im working.

切换类在这里工作吗？只是不确定如何。

$(element).toggleClass("A B");

如有任何帮助或指导，我们将不胜感激。

Answer 1

你的 fiddle 有点乱，很多脚本在不同的地方。所以我无法确切地看到你的 Flexslider 代码在哪里，但好消息是我们应该能够在没有那个的情况下解决这个问题:)

Flexslider 有一些非常棒的内置功能，包括回调。基本上，您需要将类似这样的内容添加到 flexslider 调用中:

$('#property-detail-flexslider').flexslider({
 after: function(){
  var current_img = $('.flex-active-slide img');
  if ( current_img.width() < 770 ) {
   current_img.addClass('center-img');
  }
 }
});