html - CSS Flexbox 图像不保留纵横比

Question

我正在尝试学习使用 Flexbox。我有一个页面，其中有两个图像，中间由一个条隔开，从上到下堆叠。无论浏览器如何，我都希望栏保持相同的大小，并且当浏览器缩小时调整两个图像的大小(如果有额外的空间，则保持原始图像大小。我通过包含 div 的最大高度来强制执行此操作)。我可以让图像调整高度大小，但宽度不会改变以保持纵横比。

我已经阅读了几个类似的问题和教程，但我似乎无法应用他们的解决方案来适应我的场景。这个解决方案似乎最接近我的需要:http://goo.gl/iE6Wbh

这是我目前所拥有的。我也不知道为什么它会导致内容在 codepen 上滚动... http://codepen.io/anon/pen/VLvxgo

 <style>
    #container
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.topbottom
{
    flex: 3;
    display: flex;
}

.topbottom.top
{
    max-height: 93px;
}

.topbottom.bottom
{
    max-height: 152px;
}

.topbottom > img
{
    width: auto;
    height: 100%;
}

#dividerbar
{
    background-color: blue;
    width: 100%;
    height: 50px;
    margin: 20px 0;
}
    </style>

    <div id="container">
          <div class="topbottom top"><img src="http://placekitten.com/g/200/93" /></div>

        <div id="dividerbar">Hello world</div>

        <div class="topbottom bottom"><img src="http://placekitten.com/g/152/152" /></div>
    </div>

有什么想法吗？

Answer 1

我目前正在处理一个类似的问题，它似乎有点棘手。我找到了一个适用于 safari 的解决方案，但不适用于 chrome 和 firefox。他们忽略了

max-height: 100%;

属性(property)。 Check this out并调整浏览器大小。

尽管我不是 100% 确定您要实现的目标(调整浏览器窗口大小时，您的代码笔无论如何都不会改变)，i've build this one .

让我知道方向是否正确