jQuery - 調整大小的圖像，以適應div

我有不同的高度和寬度的div，並希望我的圖像被自動調整大小以填充這些div 100％，然後當然居中。jQuery - 調整大小的圖像，以適應div

此刻我的圖像被設置爲寬度100％，然後使用下面的jQuery jQuery，但是這隻適用於高度超過div的圖像，一旦調整大小，我將如何使它100％高度和寬度，中心也..完全填補div（即使這意味着拉伸圖像）！

謝謝。

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var top_margin = -(img_height/2); 
    $(item).css({ 
     'top': '50%', 
     'margin-top': top_margin 
    }); 
});

來源

2013-10-14 Jake

你有沒有試過'img.shelf-img {width：100％;身高：100％; }'？ – Joe

您是否嘗試過CSS屬性'background-size：cover;'？ – Alvaro

你有一些邏輯，將圖片連接到一個div？ –

使用CSS同時設置寬度和圖像以100％和圖像的高度會自動拉伸，以填補包含分區，而不需要jQuery的。

此外，您將不需要居中圖像，因爲它已被拉伸以填充div（以零邊距爲中心）。

HTML：

<div id="containingDiv"> 
    <img src=""> 
</div>

CSS：

#containingDiv{ 
    width: 200px; 
    height: 100px; 
} 
#containingDiv img{ 
    width: 100%; 
    height: 100%; 
}

這樣一來，如果用戶已禁用JavaScript，圖像仍然會被拉伸以填滿整個DIV寬度/高度。

jQuery的方式（收縮/拉伸以適應屏幕 - 包括WHITESPACE）：

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var div_height = $(item).parent().height(); 
    if(img_height<div_height){ 
     //IMAGE IS SHORTER THAN CONTAINER HEIGHT - CENTER IT VERTICALLY 
     var newMargin = (div_height-img_height)/2+'px'; 
     $(item).css({'margin-top': newMargin }); 
    }else if(img_height>div_height){ 
     //IMAGE IS GREATER THAN CONTAINER HEIGHT - REDUCE HEIGHT TO CONTAINER MAX - SET WIDTH TO AUTO 
     $(item).css({'width': 'auto', 'height': '100%'}); 
     //CENTER IT HORIZONTALLY 
     var img_width = $(item).width(); 
     var div_width = $(item).parent().width(); 
     var newMargin = (div_width-img_width)/2+'px'; 
     $(item).css({'margin-left': newMargin}); 
    } 
});

jQuery的方式 - 作物FIT（沒有空格）：

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var div_height = $(item).parent().height(); 
    if(img_height<div_height){ 
     //INCREASE HEIGHT OF IMAGE TO MATCH CONTAINER 
     $(item).css({'width': 'auto', 'height': div_height }); 
     //GET THE NEW WIDTH AFTER RESIZE 
     var img_width = $(item).width(); 
     //GET THE PARENT WIDTH 
     var div_width = $(item).parent().width(); 
     //GET THE NEW HORIZONTAL MARGIN 
     var newMargin = (div_width-img_width)/2+'px'; 
     //SET THE NEW HORIZONTAL MARGIN (EXCESS IMAGE WIDTH IS CROPPED) 
     $(item).css({'margin-left': newMargin }); 
    }else{ 
     //CENTER IT VERTICALLY (EXCESS IMAGE HEIGHT IS CROPPED) 
     var newMargin = (div_height-img_height)/2+'px'; 
     $(item).css({'margin-top': newMargin}); 
    } 
});

來源

2013-10-14 13:34:01 IIIOXIII

[Fiddle]（http://jsfiddle.net/X8czt/1/） –

@RustyTheBoyRobot：從OP的帖子'「......完全填滿div（即使這意味着拉伸圖像）！」「 – IIIOXIII

沒有問題bob，希望OP在提問之後不會消失。本來想知道我的建議是否有幫助。 – IIIOXIII

如果你想保持圖像比例，我會將max-height和max-width設置爲100％。 Here's一個示例，以顯示如何工作。這將有效地縮小大於div的圖像，但會保持縱橫比。

對於小於div的圖片，您必須使用JavaScript進行放大。的基本算法是像這樣：

查找圖像的縱橫比（寬度/高度）
查找div的縱橫比（寬度/高度）
如果圖像的縱橫比爲小於 div的，設置圖像的height到100%
如果圖像的縱橫比是大於 div的，設置圖像的width到100%
無論尺寸沒有設置，將其設置爲auto

很明顯，你可以使用這個算法下擴大或，但如果你能保證你的DIV總是比你的形象更小，可以使用更簡單的CSS解決方案。

它看起來像你有代碼做中心，所以我會留給你。

來源

2013-10-14 15:05:26 RustyTheBoyRobot

jQuery - 調整大小的圖像，以適應div

回答

相關問題