Question

我有一个包含图像的div列表，我想确保它们的大小合适。为此，它们通常是100％宽度，除非它们小于父母的100％，在这种情况下它们应该是原始尺寸。这是我的代码：

$('.sa-img').each(function() {
    img = new Image();
    var obj = $(this);
    img.onload = function() {
        //console.log(this.width + ' <= ' + obj.outerWidth());
        if (this.width <= obj.outerWidth())
            obj.css({'width':this.width +'px'});
        }
        img.src = $(this).attr('src');
    }
});

至于HTML，它就像这样简单：

<div class="sa-img-container">
    <img class="sa-img" src="<?=$img_url?>" />
</div>

现在这个工作正常，花花公子，第一张图片的除了。我该怎么办？就好像它不是在等待加载或其他东西。如果我重新排列图像并不重要，它总是第一个受到影响的人。其原始大小的输出始终为100，这使得它大小调整为图像的原始大小，而不管它是否大于100％（例如220px的图像，将调整为220px而不是100％，在204px div内 - 导致布局无法按预期工作。

Answer 1

如上面的评论中所述，使用CSS很容易实现。具体来说，是max-width属性。

假设图像的宽度为600像素，您可以：

.resize-to-100{
    width: 500px;
    background: red;
}
.dont-resize{
    width: 750px;
    background: yellow;
}
img{
    max-width: 100%;
}

示例：http://jsfiddle.net/efbVZ/

加载图像时调整大小

1 个答案: