【问题标题】：How to proportionately reduce the height of element contains images?如何按比例降低元素包含图像的高度？
【发布时间】：2017-08-08 15:01:27
【问题描述】：

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) 当我水平调整窗口大小时。

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

当前结果

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

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

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

【问题讨论】：

标签： html css image center window-resize

【解决方案1】：

<!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>

【讨论】：

我知道这需要对您的代码进行一些更改，但这是正确的方法，它的复杂性更低，性能最佳；)
谢谢你的回答，但我试过了，效果不太好。我认为因为元素的高度和宽度是固定的，所以它会按比例改变它的大小。我的问题是什么？如果你有时间，请告诉我怎么做。 jsbin.com/quxisujuze/1/edit?html,css
我为您修改了代码只是为了演示如何使用 background-size 属性，然后使用相同的方法将其应用于您的层次结构。
谢谢你的好意！但它似乎与我想要的不同..我是否碰巧做错了什么？我在 JS Bin 和本地尝试过。 (jsbin.com/bobucilosu/edit?html,css) 下面的图片是关于我认为它看起来不同的东西。 (imgur.com/a/zyZwd) 上面是我想要的，下面是我从你的代码中得到的结果。
在 JSBin 之外尝试您的代码，因为它在 iframe 中为您的问题添加了新参数，这将导致错误的 HTML 和正文标记大小。

【解决方案2】：

你可以看看这个问题： Why is percentage height not working on my div?

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

希望这会有所帮助。

【讨论】：