Question

我需要一个<img>来获得尽可能小的尺寸，而不会在div中留下任何空格，而是需要水平和垂直集中。图像的大小是可变的。

所以这是一个例子，你可以更好地理解它： http://jsfiddle.net/q2c9D/

更多信息：就像Mikel Ward那样，我需要图像来填充div，以便它的背景不可见。我将div背景设为黑色，因此更容易判断它没有填满div。但我需要将图像居中和设置为最小尺寸，而不会在填充div时失真。

Answer 1

我会将width设置为100％，并完全删除height属性。这样可以防止图像失真

img{
  width: 100%;
}

要使元素居中，我会使用this plugin。除了调用函数

之外，它使你无需工作

$("img").center()

Answer 2

尝试将min-width: 100%添加到img。 Here's an example.它可能会拉伸图片，但尺寸可能不会太明显。：）

Answer 3

这会使图像在页面上居中：

img{
    margin: 0 auto;
    position: relative;
    display: block;
}

只需将图像包裹在<div>中，即可将它们放置在页面上的某个位置。

Answer 4

我这样做的方法是设置宽度或高度，但只有1为100％。

<img width="100%" src=""/>

Answer 5

所以我能够按照我想要的方式使用jQuery。使用以下代码：

function centerimg(){

$('img').each(function(){
    var imgwidth = $(this).width();
    var imgheight = $(this).height();

    if (imgwidth > imgheight) {
        $(this).css({
            "height": "100%",
            "width": "auto"
        });

        imgwidth = $(this).width();
        $(this).css("margin-left", -.5 * imgwidth + 50 + "px");

    } else if (imgheight > imgwidth) {
        $(this).css({
            "width": "100%",                
            "height": "auto"
        });

        imgheight = $(this).height();
        $(this).css("margin-top", -.5 * imgheight + 50 + "px");

    } else {
        $(this).css({
            "height": "100%",
            "width": "100%"
        })
    }
})

};

window.onload = centerimg;<code>

代码获取图像的宽度和高度，因此如果图像更宽或更高，则会将较小的尺寸正确设置为100%，将较大的尺寸设置为auto。之后，它再次获得最后一个的值（因为它是用auto重新调整大小）并将其居中。此外，如果图像是正方形，则只需将其设置为100%。这样，图像将始终填满div并居中。谢谢大家。希望这段代码可以帮助他人。

如何在<img/>上应用“background-size：cover”所具有的相同效果

5 个答案: