如何中心圖像，並保持比例

Question

我有這個形象，介紹了什麼是我需要，我已經試過幾件事情，就像

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

我想有自己的設計在他們原來的大小，但centerd，並保持它們的比例。

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屬性來設置圖片的網址。 然後可以使用背景大小和背景位置：

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

設置URL，你需要將代碼更改爲：

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>";