jQuery - 调整图像大小以适合 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19361309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - resizing image to fit div
提问by Jake Hills
I have divs varying in height and width and wish for my images to be automatically resized to fill these divs 100%, and then of course centred.
我有高度和宽度不同的 div，并希望我的图像能够自动调整大小以 100% 填充这些 div，然后当然居中。
At the moment my images are set to width 100% and then using the jQuery below centred, but this only works for images where the height are more than the div once resized.. how would I make it 100% for both height and width and center also.. completely filling the div (even if this means stretching the image)!
目前我的图像设置为宽度 100%，然后使用居中下方的 jQuery，但这仅适用于高度超过 div 的图像一旦调整大小..我如何将高度和宽度设为 100%中心也......完全填充div（即使这意味着拉伸图像）！
Thanks.
谢谢。
$('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
});
});
回答by IIIOXIII
Use CSS to set both the Width and Height of the image to 100% and the image will be automatically stretched to fill the containing div, without the need for jquery.
使用 CSS 将图像的宽度和高度都设置为 100%，图像将自动拉伸以填充包含的 div，无需使用 jquery。
Also, you will not need to center the image as it will already be stretched to fill the div (centered with zero margins).
此外，您不需要将图像居中，因为它已经被拉伸以填充 div（以零边距居中）。
HTML:
HTML：
<div id="containingDiv">
<img src="">
</div>
CSS:
CSS：
#containingDiv{
width: 200px;
height: 100px;
}
#containingDiv img{
width: 100%;
height: 100%;
}
That way, if your users have javascript disabled, the image will still be stretched to fill the entire div width/height.
这样，如果您的用户禁用了 javascript，图像仍将被拉伸以填充整个 div 宽度/高度。
OR
或者
The JQuery way (SHRINK/STRETCH TO FIT - INCLUDES WHITESPACE):
JQuery 方式（收缩/拉伸以适应 - 包括空格）：
$('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});
}
});
The JQuery way - CROP TO FIT (NO WHITESPACE):
JQuery 方式 - 裁剪适合（无空格）：
$('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});
}
});
回答by RustyTheBoyRobot
If you want to keep the image ratio, I would set max-heightand max-widthto 100%. Here'sa sample to show how that works. That will effectively shrink images that are larger than the div, but it will keep the aspect ratio.
如果你想保持图像比例，我会将max-height和设置max-width为 100%。这里有一个示例来展示它是如何工作的。这将有效地缩小大于 div 的图像，但它会保持纵横比。
For images that are smaller than the div, you will have to scale up with JavaScript. The basic algorithm is like so:
对于小于 div 的图像，您必须使用 JavaScript 放大。基本算法是这样的：
- Find the aspect ratio of the image (width / height)
- Find the aspect ratio of the div (width / height)
- If the image's aspect ratio is less thanthe div's, set the image's
heightto100% - If the image's aspect ratio is greater thanthe div's, set the image's
widthto100% - Whichever dimension is not set, set it to
auto
- 求图片的纵横比（宽/高）
- 求div的纵横比（宽/高）
- 如果图像的纵横比小于div 的，则将图像设置
height为100% - 如果图像的纵横比大于div 的，则将图像设置
width为100% - 未设置哪个维度，将其设置为
auto
Obviously, you could use this algorithm for scaling up or down, but if you can be guaranteed that your div will always be smaller than your image, you can use the simpler CSS solution.
显然，您可以使用此算法进行放大或缩小，但如果您可以保证 div 始终小于图像，则可以使用更简单的 CSS 解决方案。
It looks like you've got code to do centering, so I'll leave that to you.
看起来你有代码来做居中，所以我会把它留给你。
