标签 javascript jquery html css
<分区>
我的 div 的高度和宽度各不相同，我希望我的图像能够自动调整大小以 100% 填充这些 div，然后当然居中。
目前，我的图像宽度设置为 100%，然后使用居中下方的 jQuery，但这仅适用于调整大小后高度大于 div 的图像。我如何使两个高度都为 100%以及宽度和中心也..完全填充 div(即使这意味着拉伸(stretch)图像)!
谢谢。
$('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
});
});
最佳答案
使用 CSS 将图像的宽度和高度都设置为 100%，图像将自动拉伸(stretch)以填充包含的 div，无需 jquery。
此外，您不需要将图像居中，因为它已经被拉伸(stretch)以填充 div(以零边距居中)。
HTML:
<div id="containingDiv">
<img src="">
</div>
CSS:
#containingDiv{
width: 200px;
height: 100px;
}
#containingDiv img{
width: 100%;
height: 100%;
}
这样，如果您的用户禁用了 javascript，图像仍将被拉伸(stretch)以填充整个 div 宽度/高度。
或
JQuery 方式(收缩/拉伸(stretch)以适合 - 包括空格):
$('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 方式 - 裁剪以适合(无空白):
$('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});
}
});
关于javascript - jQuery - 调整图像大小以适应 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19361309/