圖像在頁面中心 - 可調整大小

我想用網頁居中顯示圖像的中心。比窗口調整大小時，我想實現圖像調整大小，而不是調整其大小，它應該通過瀏覽器窗口左右裁剪，使圖像的中心位於圖像的垂直中心。圖像在頁面中心 - 可調整大小

<div class="image-container"> 
    <img src=imgpath/image.jpg"> 
</div>

我嘗試這樣做：

.image-container img{ 
    width: 100%; 
    min-width: 1440 !important; 
    margin: 64px auto 0 auto; 
    height: auto; 
    min-height: 400px !important; 
} 

img { 
    vertical-align: middle; 
}

有任何一個任何想法如何使這個。如果不是jq應該的話，我會以CSS爲前提。

來源

2013-01-03 Denis

多少中心有圖像，根據您的文章「 ......所以圖像的中心是圖像的垂直中心」即使瀏覽器被調整大小，圖像也不應該調整大小，您的目標是縱向和橫向居中放置圖像的目標是什麼？ – kidwon

圖片只有垂直中心。圖像不能調整大小，調整大小時應該通過瀏覽器窗口左右裁剪。 – Denis

您可以使用display:table-cell將內部圖像與div的中間對齊。

但是在這種情況下，你不能給予保證金，因爲表格單元格的div用作td，並且在技術上不能給表格td保證金。

所以我已經添加邊框到白色的div。

.image-container{ 
    background: #C8BFE7; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
    border:white 5px solid 
}

演示：http://jsfiddle.net/Arav8/3/

來源

2013-01-03 14:22:03 Selvamani

圖像在頁面中心 - 可調整大小

回答

相關問題