Question

我试图限制表格中图像的高度。该表的原因是允许这些图像垂直和水平对齐到页面的中心。我遇到的问题是大于浏览器高度的图像消失了页面底部放大表格，我希望图像具有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%;
}

Answer 1

您可以在不使用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;才能生效。

我希望这有帮助！

缩放大型居中图像以适合html表格高度

1 个答案: