jquery - 如果高度小于 parent.height，则垂直居中图像，否则将高度限制为 100%

Question

我正在使用带有全屏父 div 的 html5-fullscreen 模式，我想在其中垂直居中图像，但前提是图像小于父 div（即屏幕大小）。我还想将图像限制为max-height= 父级的 100%，以避免在图像大于屏幕时放大。

我可以使用两个 div（一个display:table和另一个display:table-cell）将图像居中，但我不能同时将图像设置max-height为不超过父 div。我可以通过使用来完成后者，position:absolute; max-height:100%;但是居中不适用于较小的图像。

示例标记：

<div id="fullscreen-container">
    <div id="fullscreen-img-wrapper">
        <img id="fullscreen-img" src="/images/test-6000x4000.png" />
    </div>
</div>

非常感谢任何如何实现这一点的想法！

Answer 1

<style>
#fullscreen-img-wrapper { display: table-cell;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 100%; }
#fullscreen-img { width:100%; }
</style>

<div id="fullscreen-container">
    <div id="fullscreen-img-wrapper">
        <img id="fullscreen-img" src="/images/test-6000x4000.png" />
    </div>
</div>