Question

寻找其他例子但找不到任何例子。我的图像容器使用max-width / max-height，因此图像缩放到容器，但我似乎无法将其设置为自动边距顶部/底部或垂直对齐到中间而不设置高度。

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 65%;
    position: absolute;
    right: 0;
}

#container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    vertical-align: middle;    
}


<div id="container"><img   src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>

http://jsfiddle.net/beftR/

Answer 1

我只能通过在您的代码中添加另一个名为div的{{1}}来使其工作。我使用#container2 / table table-cell类型来执行此操作。这是我做的（jsFiddle here）。

display

垂直对齐流体容器中的图像

1 个答案: