图像在页面中心 - 可调整大小

我想用网页居中显示图像的中心。比窗口调整大小时，我想实现图像调整大小，而不是调整其大小，它应该通过浏览器窗口左右裁剪，使图像的中心位于图像的垂直中心。图像在页面中心 - 可调整大小

<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

图像在页面中心 - 可调整大小

回答

相关问题