Question

好的，所以我已经在这几个小时都无济于事。我想要做的是编写一个执行以下操作的脚本：当一个图像大于它的容器时，它会向它添加“大”类。但是，如果图像小于它的容器，它会将类添加到它的小。这是我到目前为止所做的：

$(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');
    }
});
});

以下是一个示例：http://jsfiddle.net/TheInfection/6fUgr/8

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

Answer 1

看看这是否是你要找的。

Demo

var postWidth = $('.post').innerWidth();
$('.image img').removeClass('large, small') ;
    $('.image img').each(function() {

        var imageWidth = this.width;
        if (imageWidth > postWidth) {
            $(this).addClass('large');
        } else {
            $(this).addClass('small');
        }
    });

Answer 2

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

$('.image img')这会选择超过1个图像对象，因此src属性不会是预期的属性。
您应该重新计算每个图像的大小，并为一个图像对象指定一个类。 $('.image').find('img').addClass('large');将.large课程分配给每个图片。

此 example 会显示.each(function(idx, item)方法的正确用法。

Answer 3

看起来你想要做的是限制元素.post内任何图像的宽度。

您可以使用CSS属性max-width来实现这一点，该属性在CSS2中可用：

http://www.w3schools.com/cssref/pr_dim_max-width.asp

浏览器支持

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

http://caniuse.com/minmaxwh

查看实际操作

http://jsfiddle.net/vonky/NYF2v/

标记 - HTML

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

标记 - CSS

.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 */
}

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

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

3 个答案: