如何使图像居中并保持比例

Question

我有这个描述我需要的图像，我尝试了几件事，比如

vertical-align: middle;
text-align: center;

我希望将这些图像放在原来的尺寸中，但要保持中心位置。

CSS：

.imgBanner1
{
    max-width: 400px;
    max-height: 233px;
}
.imgBanner2 {
    max-width: 400px;
    max-height: 233px;
}
.imgBanner2:hover {
    opacity: 0.8;
    cursor: pointer;
}
.imgBanner3 {
    width: 190px;
    height: 233px;
}
.imgBanner4 {
    position: relative;
    z-index: -1;
    width: 250px;
    height: 224px;
    margin-top: -4px;
}
.imgBanner5 {
    width: 250px;
    height: 224px;
    margin-top: -4px;
}
.imgBanner6 {
    width: 295px;
    height: 224px;
    margin-top: -4px;
}
.imgBanner7 {
    width: 195px;
    height: 224px;
    margin-top: -4px;
}

我用这个加载图片：

function buildBanner(json) {
    var images = "";

    //total of images in the json object
    var totalImages = 0;
    totalImages = json.length;

    for (var i = 0; i < totalImages; i++) {
        images += "<div class='imgBanner" + (i+1) + "' style='overflow: hidden; display:inline-block; text-align: center;'><img src='" + json[i].img + "' /></div>";
    }
    $("div#receiveBanner").append("<div id='bannerBuilt' style='width: 992px; height: 459px; overflow: hidden'></div>");
    $("div#bannerBuilt").hide().append(images).fadeIn("slow"); 
};

Answer 1

您可以使用div作为容器，而不是使用图像标记，并使用background-image属性设置图像的网址。 然后，您可以使用background-size和background-position：

.imgBanner{
    background-size: contain;
    background-position: center;
}

要设置网址，您需要将代码更改为：

images += "<div class='imgBanner imgBanner" + (i+1) + "' style='overflow: hidden; display:inline-block; text-align: center; background-image: url('" + json[i].img + ");'></div>";

顺便说一句，正如您将为所有这些使用“imgBanner”类一样，您可以将所有内联代码移动到css。它更容易维护。

的CSS：

.imgBanner{
        background-size: contain;
        background-position: center;
        overflow: hidden; 
        display:inline-block; 
        text-align: center;
}

代码现在看起来像这样：

images += "<div class='imgBanner imgBanner" + (i+1) + "' style='background-image: url('" + json[i].img + ");'></div>";