圖片使用JQUERY自動調整大小/縮放比例

Question

我有一個寬度爲600像素的div。我想動態地拉動圖像。圖像大小各不相同。我想要做的是，如果圖像大小超過600像素，我們將調整圖像大小爲600像素，以適應div。但如果圖像不超過600像素，我們將保留原始圖像寬度。

我如何通過使用jQuery來實現？謝謝。

Answer 1

您可以通過給圖像沒有明確的寬度（所以它會使用原來的寬度），並添加以下CSS屬性來做到這一點沒有任何JavaScript：

<img style='max-width: 600px' src='...'> 

警告：不工作在IE 6 Compatibility table

Answer 2

可以使用CSS的圖像的寬度設置爲100％，然後使用jQuery這樣保持縱橫比：

$('#containerDiv img').width(); //gets width of image 
$('#containerDiv img').height(); //gets height of image 

你ç進行計算以保持寬高比，然後使用height()屬性設置圖像的新高度。

Answer 3

如果您正在託管這些映像，則可能需要在服務器上將它們擴展到服務器上。這樣你就可以節省帶寬，減少瀏覽器的下載時間，並且不需要在客戶端調整大小。

Answer 4

這將幫助你：

$('img').each(function(){ 
    if($(this).width()>600){ 
     $(this).width(600).css('cursor','pointer').click(function(){$(this).css('width','');}); 
    } 
});