1

我正在尝试限制表格中图像的高度。表格的原因是允许这些图像垂直和水平对齐到页面中心。我遇到的问题是大于浏览器高度的图像在放大表格的页面底部消失，我希望图像具有max-height:100;并缩放以适应。它适用于宽度，但不适用于高度。

这是我到目前为止所拥有的...

<div id="table">
<div id="cell">
<img src="image.jpg"/>
</div>
</div>

和

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

#table{
display:table;
height:100%;
width:100%;
}

#cell{
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#ccc;
}

img{
max-width:100%;
max-height:100%;
}
4

1 回答 1

3

您可以在不使用table. 这是基本大纲，HTML：

<body>
    <img src = "image.jpg"/>
</body>

CSS：

html, body {
    height: 100%;
    width: 100%;
}
body {
    position: relative;
}
img {
    position: absolute;
    margin: auto; /*make sure it's centered both vertically and horizontally*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

还有一点 jsFiddle 演示：little link。请注意，body必须具有position: relative;此功能。

我希望这有帮助！

于 2012-09-01T19:29:21.593 回答