如何按比例降低元素包含图像的高度？

Question

HTML, CSS

为了制作类似下面的图片，我写了一个CSS (result).

<div id="ulWrapWrap">
    <div id="ulWrap">
        <ul>
            <li>
                <div class="imgWraps"><img src="http://i.imgur.com/QW18s8F.png" alt=""></div>
            </li>
            <li>
                <div class="imgWraps"><img src="http://i.imgur.com/QW18s8F.png" alt=""></div>
            </li>
        </ul>
    </div>
</div>

‖

html, body { height: 100%; }
body { background-color: DodgerBlue; }

#ulWrapWrap { display: table; height: 100%; margin: 0 auto; }
#ulWrapWrap #ulWrap { display: table-cell; max-height: 100%; vertical-align: middle; }
#ulWrapWrap #ulWrap ul { max-width: 90%; max-height: 90%; margin: 0 auto; padding: 10% 20%; background-color: HotPink; }
#ulWrapWrap #ulWrap ul:after { display: block; clear: both; content: ''; }
#ulWrapWrap #ulWrap ul li { float: left; display: table; max-width: 45%; height: 100%; margin-right: 10%; }
#ulWrapWrap #ulWrap ul li:last-child { margin-right: 0; }
#ulWrapWrap #ulWrap ul li .imgWraps { display: table-cell; vertical-align: middle; }
#ulWrapWrap #ulWrap ul li .imgWraps img { max-width: 100%; max-height: 100%; }

最好的结果

(1) 当我水平调整 window 大小时。

(2) 当我垂直调整 window 大小时。

当前结果

它适用于 (1)，但不适用于 (2)。我怎样才能让它发挥作用？ ;)

(1) 当我水平调整 window 大小时。

(2) 当我垂直调整 window 大小时。

Answer 1

你可以看看这个问题：

基本上，您需要为所有元素指定高度百分比。当与百分比值一起使用时，CSS 高度属性是根据元素的包含块计算的。

希望这对您有所帮助。

Answer 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
        <style>
            html, body { padding:0px; margin:0px; }
            body { background-color: DodgerBlue; height:100%; width:100%; }
            .ulWrapWrap
            {
                box-sizing:border-box;
                padding:20px;
                margin:0px auto;
                text-align:center;
                background-color:HotPink;
                display:block;
                height:calc(90vmin);
                width:calc(90vmin);
                margin-top: calc(100vh * 0.5 - 90vmin * 0.5);
                margin-left: calc(100vw * 0.5 - 90vmin * 0.5);
            }

            .dimage
            {
                box-sizing:border-box;
                width:40%;
                height:100%;
                display:inline-block;
                padding-right:10px;
                background:url('http://i.imgur.com/QW18s8F.png') 50% 50% no-repeat;
                background-size:contain;
            }
        </style>
        <title>JS Bin</title>
    </head>
    <body>
        <div class="ulWrapWrap">
            <div style="width:100%; height:100%; position:relative; display:block;">
                <div class="dimage"></div>
                <div class="dimage"></div>
            </div>
        </div>
    </body>
</html>

如何按比例降低元素包含图像的高度？

How to proportionately reduce the height of element contains images?

html

css

image

center

window-resize

HTML, CSS

最好的结果

当前结果