0

好的，所以，我有这个（由 Wordpress 驱动的）网站，上面有一些图像。一旦它们溢出内容 div，我想缩放这些图像。为了使它们正确缩放，幸运的是我可以添加一个.scaled可以制作 image 的类，这样就可以width:100%;解决问题。

我的问题是，当我检测图像是否对于页面来说太大时，我似乎无法选择页面上的特定图像。

HTML：

<div class="entry-content">
   <p>
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Luftballong.jpg" width="1024" height="768" class="alignnone">
   </p>
</div>

重要的 CSS：

.scaled {
   width:100%;
 }

现在，对于 jQuery。我目前的设置是这样的：

$(window).resize(function() {
    if($('section .entry-content img').width() > $('.entry-content').width()) {
        $(this).addClass('scaled')
    }
});

我的问题经常出现在$(this). 我猜它不会在这里选择实际的图像，而是选择别的东西，或者没有特别的东西。

所以我的问题是，用 jQuery 只选择一个图像并对其应用一个类的最佳方法是什么？我很想看到一些只涉及我将其更改$(this)为其他内容的东西。

提前致谢！

4

4 回答 4

2 
$(window).on('resize', function() {
    $('section .entry-content img').filter(function() {
        return $(this).width() > $(this).closest('.entry-content').width();
    }).addClass('scaled');
});
于 2013-03-27T19:34:27.583 回答
0

一种方法是使用如下变量：

$(window).resize(function() {
  var $img = $('section .entry-content img')[0];
  if($img.width() > $('.entry-content').width()) {
    $img.addClass('scaled')
  }
});
于 2013-03-27T19:32:34.213 回答
0

尝试将您的 jQuery 方法更改为：

$(window).resize(function() {
    $( "section .entry-content img" ).each(function() {
        if($(this).width() > $('.entry-content').width()) {
            $(this).addClass('scaled')
        }
    });
});

这应该处理每个单独的 img 元素的功能（并且“this”相对于）。

于 2013-03-27T19:32:48.843 回答
0

对于执行您想要的功能的函数，这里已经有很多很好的答案，但我认为值得添加this事件回调函数上下文中的关键字是指由 JQuery 传入的 DOM 元素。因此，在您之前的示例中，$(this)实际上导致了一个包装window元素的 JQuery 对象。

因此，正如您在许多其他示例中所见，解决方案是更改您使用的 JQuery 对象的选择器this。

于 2013-03-27T19:40:14.850 回答