Question

我有高度和宽度不同的div，希望我的图像能够自动调整大小以100％填充这些div，然后当然居中。

此时我的图像被设置为宽度100％，然后使用下面居中的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
    });
});

Answer 1

使用CSS将图像的宽度和高度设置为100％，图像将自动拉伸以填充包含的div，而不需要jquery。

此外，您不需要将图像居中，因为它已经被拉伸以填充div（以零边距为中心）。

HTML：

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

CSS：

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

这样，如果您的用户禁用了javascript，图片仍会被拉伸以填充整个div宽度/高度。

OR

JQuery方式（SHRINK / STRETCH TO FIT - 包括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方式 - CROP TO FIT（NO WHESESPACE）：

$('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});
    }
});

Answer 2

如果您想保持图像比例，我会将max-height和max-width设置为100％。 Here's一个示例，展示其运作方式。这将有效地缩小大于div的图像，但它将保持纵横比。

对于小于div的图像，您必须使用JavaScript进行扩展。基本算法是这样的：

查找图像的纵横比（宽度/高度）
找到div的宽高比（宽度/高度）
如果图片的宽高比小于 div，请将图片的height设置为100%
如果图片的宽高比大于 div，请将图片的width设置为100%
无论设置哪个尺寸，请将其设置为auto

显然，您可以使用此算法进行放大或缩小，但如果可以保证div总是小于图像，则可以使用更简单的CSS解决方案。

看起来你有代码要做居中，所以我会把它留给你。

jQuery - 调整图像大小以适应div

2 个答案: