Javascript 我如何应用与“相同”的效果；背景尺寸：封面“；在a<；img>；

我需要一个

，使其具有尽可能小的大小，而不在div中留下任何空格，并且需要在水平和垂直方向上集中。图像的大小是可变的

下面是一个示例，您可以更好地理解它：

---

更多信息：就像Mikel Ward做的那样，我需要图像填充

div

，这样背景就不可见了。我将

div

背景设置为黑色，以便更容易判断它没有填充

div

。但是我需要图像居中，并且在填充

div

时，图像大小尽可能小而不失真，尝试将

最小宽度：100%

添加到img中。它可能会将图片拉伸一点，但就其大小而言，可能不会太明显。：）

我会将

width

设置为100%，并删除

height

属性。这将防止图像失真

img{
  width: 100%;
}

要使元素居中，我将使用。它使您不做任何工作，只调用函数

$("img").center()

---

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

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

---

只需将图像包装在

中，将其放置在页面上的某个位置

我的方法是将宽度或高度设置为100%，但仅将1设置为100%

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

---

因此我能够使用jQuery以我想要的方式运行它。使用以下代码：

代码获取图像的宽度和高度，因此如果图像更宽或更高，它将正确地将较小的尺寸设置为

100%

，将较大的尺寸设置为

auto

。之后，它再次获取最后一个的值（因为它是使用

auto

重新调整大小的）并将其居中。此外，如果图像是正方形，则只需将两者都设置为

100%

。 这样，图像将始终填满

div

，并居中。

---

谢谢大家。希望此代码对其他人有所帮助。

请澄清您的问题并添加一些代码。现在很难理解你想要什么对不起，如果我不清楚的话。代码就在JSFIDLE上。我希望图像填充到100x100大小，而不被扭曲（这意味着，保持原始纵横比）和集中。看起来你已经完成了这项工作。不，正如你所看到的，第二张图像留下了一个空白点，并且没有一张图像居中。我仍然不知道你想做什么。这些图像都是100像素高和宽，因此它们已经居中谢谢你的回答，但图像不能失真。这只是一个例子，我的真实情况有更大的图像，甚至更高的高度和宽度之间的差异。所有的图像都会比作物大小大吗？或者一些可能比正方形的宽度/高度小？可能没有一个比正方形小。我想这会让事情变得容易一点？提前谢谢。这很有意思，但是有太多的东西是多余的，而且没有水平居中。也许处理JavaScript的唯一方法是？JavaScript？我知道图像之间的空格是由<代码>边缘底部< /代码>引起的。我正在尝试将图像居中放置在

div

中。图像不能被扭曲，它必须占据

div

（100px高度和100px宽度）内的所有空间。不，正如您在第二个

div

上看到的，还有一些空间。因为图像的宽度比div的宽度小@Derik这对你来说怎么样？谢谢你的回答。但它仍然没有填满

div

。如果添加

背景：黑色

返回到

div

您将很容易看到这一点。您无法再填充div而不扭曲它。它们都应该按宽度填充。您不能添加“高度”属性，否则他们将感谢您的回答。我希望图像居中，问题是我不知道图像的大小。它必须填充整个

div

。 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>