如果高度小于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%;来完成后者position:absolute; max-height:100%; 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>