Question

我正在使用带全屏父div的html5全屏模式，其中我想垂直居中图像，但前提是图像小于父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>

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

1 个答案: