缩放大的居中图像以适应 html 表格高度答案

【问题标题】：Scale large centered images to fit html table height缩放大的居中图像以适应 html 表格高度
【发布时间】：2017-12-16 18:42:46
【问题描述】：

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

【问题讨论】：

你能用一些 JavaScript/jQuery 吗？
演示：jsfiddle.net/boyce/mJSxx
@Abody97 ...我已经设法让它与一个 JS 插件一起工作，但我也想知道我是否可以纯粹用 CSS 来实现。

标签： html css css-tables fluid-layout image-scaling

【解决方案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; 才能工作。

我希望这会有所帮助！

【讨论】：