加载图像时调整大小答案

【问题标题】：Image on load resize加载图像时调整大小
【发布时间】：2013-05-12 11:48:51
【问题描述】：

我有一个包含图像的 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% - 导致布局无法按预期工作。

【问题讨论】：

CSS max-width:100% 有什么问题？
这无关紧要，我需要图像是 100%，除非它更小，在这种情况下它应该保持原始大小，而不是 100%。
不，这不是无关紧要的。这是一个示例：jsfiddle.net/efbVZ
你是对的。我是白痴。你能把这个写成答案让我接受吗？谢谢。

标签： jquery image resize

【解决方案1】：

与上面的 cmets 一样，这很容易使用 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/

【讨论】：