Jquery 如果图像大于容器，请添加类

好吧，我已经做了好几个小时了，都没有用。我想做的是编写一个脚本，它执行以下操作：当一个图像大于它的容器时，它会将类“large”添加到其中。但是，如果一个图像比它的容器小，它会向其中添加small类。以下是我目前掌握的情况：

$(window).load(function() {
var screenImage = $('.image img');

// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr('src');

// Get accurate measurements from that.
var imageWidth = theImage.width;

// Find post width
var postWidth = $('.image').innerWidth();

$('.image img').each(function() {
    if (imageWidth > postWidth) {
        $('.image').find('img').addClass('large');
    } else {
        $('.image').find('img').addClass('small');
    }
});
});

下面是一个例子：

---

相反，该脚本的最终结果是所有图像都添加了“大”类。我在谷歌、jQuery网站等上花了几个小时，但我在任何地方都找不到解决方案。有人能帮我吗？

看看这是不是你要找的

---

据我所知，你的逻辑有几个错误：

$（'.image img'）

这将选择多个图像对象，因此

src

属性不是预期的属性

您应该重新计算每个图像的大小，并为一个图像对象指定一个类<代码>$（'.image'）.find（'img'）.addClass（'large'）将

.large

类分配给每个图像

---

此显示了

的正确用法。每个（函数（idx，项）

方法都适用于您的目的。

看起来您试图做的是限制元素

.post

中任何图像的宽度

您可以使用CSS属性

max width

实现这一点，该属性在CSS2中可用：

浏览器支持

除非您需要支持ie6及更低版本，否则这应该很好-即使您需要，也可以使用polyfill：

---

在行动中看到它

标记-HTML

<div class="post">
        <img src="http://placehold.it/200x200">
            <br /><br />
        <img src="http://placehold.it/600x600">
</div>

---

如果您添加类是出于其他原因，并且需要添加类，那么PSL的初始脚本看起来应该可以工作。

您的小提琴中没有class

post

元素。哦，我修复了它。谢谢！是的！非常感谢！这真的开始让我感动了：p

<div class="post">
        <img src="http://placehold.it/200x200">
            <br /><br />
        <img src="http://placehold.it/600x600">
</div>

.post {
    width: 300px; /* cap the width of our DIV.post */
    margin: 0 auto; /* for visual reference, let's center our element */
    background-color: #00B2EE; /* for visual reference, let's make it blue */
    text-align: center; /* for visual reference, let's center our content */
}

.post img {
    max-width: 100%; /* this is the magical faerie dust */
}