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

Question

我有各种高度和宽度不同的div，希望我的图片自动调整大小以填充这些div100％，然后当然是居中显示。

目前，我的图像已设置为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
    });
});

- Jake Hills

---

你试过 img.shelf-img{ width: 100%; height: 100%; } 吗？ - Joe

你尝试过CSS属性background-size: cover;吗？ - Alvaro

你有一些将图片与 div 相关联的逻辑吗？ - b_dubb

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的宽度/高度。

或者

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});
    }
});

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});
    }
});

- IIIOXIII

---

Fiddle 是一个在线的代码分享工具，它允许用户创建和分享包含 HTML、CSS 和 JavaScript 代码的网页。用户可以编辑和运行这些代码，并将其作为链接或嵌入到他们的网站中。Fiddle 还提供了与其他开发人员交流的功能，例如评论和团队协作工具。 - Pow-Ian

没问题，希望提问者在提问后不会消失。如果我的建议有帮助的话，我很想知道。 - IIIOXIII

@JakeHills 有什么进展吗？代码中的JQuery部分假定您仍将width: 100％作为默认图像宽度。 - IIIOXIII

@IIIOXIII 不完全是这样的..它都是调整大小和居中，但我得到了图像两侧的边框。如果我没有解释清楚，我很抱歉，但我希望div被图像完全覆盖。你的代码非常接近，所以我会自己尝试，但如果你有一些空闲时间，请继续呆在这里。感谢你迄今为止的帮助。 - Jake Hills

谢谢！太完美了，感谢你今天的帮助 :) - Jake Hills

Answer 2

如果您希望保持图像比例，我会将max-height和max-width设置为100%。这里有一个示例以展示其工作原理。这将有效地缩小大于div的图像，但会保持纵横比。

对于小于div的图像，您需要使用JavaScript进行缩放。基本算法如下：

1. 找出图像的纵横比（宽度/高度）
2. 找出div的纵横比（宽度/高度）
3. 如果图像的纵横比小于 div的纵横比，则将图像的height设置为100%
4. 如果图像的纵横比大于 div的纵横比，则将图像的width设置为100%
5. 未设置的维度，设置为auto

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

看起来您已经有了居中的代码，所以我会留给您。

- RustyTheBoyRobot