0

我有一个包含图像的 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 的图像，在 204px div 内将调整为 220px 而不是 100% - 导致布局无法按预期工作。

4

1 回答 1

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/

于 2013-05-12T11:59:36.947 回答