图像负载调整大小

我有一个divs列表包含图像，我想确保它们在适当的大小。为此，它们通常是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％的大小（例如，220像素的图像，将调整为220px而不是100％，在204像素内格 - 导致预期布局到不行

来源

2013-05-12 casraf

CSS'max-width：100％'有什么问题？ – ahren 2013-05-12 11:53:45

这是无关紧要的，我需要的形象是100％，除非它更小，在这种情况下，它应该保持原来的大小，而不是100％。 – casraf 2013-05-12 11:54:38

不，这不是无关紧要的。这里有一个例子：http://jsfiddle.net/efbVZ/ – ahren 2013-05-12 11:56:20

正如上述评论，这是很容易使用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-12 11:59:36 ahren

图像负载调整大小

回答

相关问题