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

Question

我有一个770px宽的div。由于周围的元素，我需要让div中的图像向左浮动。我需要将宽度小于770px的图像居中。有些图像的宽度仅为300像素，因此拉伸和裁剪它们是不可能的。

是否可以将一个类应用于与jquery脚本相关的所有滑块图像，该脚本表示如果原始图像宽度小于770px，则将此css类应用于它。然后那个班级将他们的形象集中在一起。

这似乎很容易解决，但我无法完全绕过它。

Here is a jsfiddle where im working.

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

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

非常感谢任何帮助或指示。

Answer 1

你的小提琴有点乱，很多脚本在不同的地方。所以我无法确切地看到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');
  }
 }
});

Answer 2

暂时从大小限制中释放img标记，检查其offsetWidth，然后对类进行决策。 offsetWidth包含实际标记（块）宽度（以像素为单位）。

Answer 3

如果包含容器是770，并且您希望任何770+填充容器，则在图像上放置最大宽度，并将图像置于其中心。我不明白为什么你需要向左浮动，如果你想要它居中或完整