0

我需要一个<img>尽可能小的尺寸而不在 div 内留下任何空白空间，并且它需要水平和垂直集中。图像的大小是可变的。

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

更多信息：就像 Mikel Ward 所做的那样，我需要图像来填充div，以便它的背景不可见。我将div背景设置为黑色，以便更容易判断它没有填满div. 但是我需要将图像居中并尽可能减小尺寸，而不会在填充div.

4

5 回答 5

2

这是我的出发点

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

img{
  width: 100%;
}

为了使元素居中，我会使用这个插件。除了调用函数之外，它使您不做任何工作

$("img").center()
于 2013-08-01T02:50:27.820 回答
0

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

函数 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并居中。谢谢大家。希望此代码对其他人有所帮助。

于 2013-08-02T21:50:29.007 回答
0

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

<img width="100%" src=""/>
于 2013-08-01T08:13:23.250 回答
0

尝试添加min-width: 100%到 img。这是一个例子。它可能会稍微拉伸图片，但在它的大小上，可能不会太明显。:)

于 2013-08-01T02:43:15.003 回答
0

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

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

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

于 2013-08-01T02:58:35.557 回答