圖像負載調整大小

我有一個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

圖像負載調整大小

回答

相關問題