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。

让我知道它是否是正确的方向

CSS Flexbox图片未保留纵横比

1 个答案: