CSS Flexbox图像不保留纵横比

Question

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

我已经阅读了几个类似的问题和教程，但我似乎无法应用他们的解决方案来适应我的场景。这个解决方案似乎最符合我的需求：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%;

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

虽然我不能 100% 确定您想要实现什么（您的 codepen 在调整浏览器窗口大小时不会发生任何变化），i've build this one。

告诉我方向是否正确