Display:flex 拉伸百分比宽度图像

Question

我正在尝试编写响应式基于图标的菜单栏。我正在使用 display:flex 来执行此操作，但我遇到的问题是当页面按比例放大或缩小时，图像一直想要水平拉伸或挤压。如果它们只是相对移动并统一缩放，那将是更好的解决方案。

我做错了什么？

<!DOCTYPE html>
 <html>
        <head>
            <style>
                #A {
                    display: flex;
                    justify-content: space-around;
                }

                .B {
                    width: 15%
                }
            </style>
        </head>

        <body>
            <div id="A">
                <img class="B" src="http://tinyurl.com/h9zm7bp">
                <img class="B" src="http://tinyurl.com/h9zm7bp">
                <img class="B" src="http://tinyurl.com/h9zm7bp">
                <img class="B" src="http://tinyurl.com/h9zm7bp">
                <img class="B" src="http://tinyurl.com/h9zm7bp">
            </div>
        </body>

        </html>

Answer 1

您可以使用 px 代替 % 并使用以下代码

#A {
 overflow: auto;
}
#B {
 float: left;
 width: (in px);
}

Answer 2

试试这个：

#A {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.B {
    max-width:100%;
}

Answer 3

要display: flex分发space而不压缩图像，您可以将图像转换为<div>s，然后使用background-size: contain将图像设置为背景.

<!--- ... --->
<style>
    #A {

    }

    .B {
       width: 15%;
       background-image: url("http://tinyurl.com/h9zm7bp");
       background-size: contain;
    }
</style>

<!-- ... -->

<div id="A">
   <div class="B"></div>
   <div class="B"></div>
   <div class="B"></div>
</div>

此外，出于某种原因，设置基于 % 的高度有效：

   #A {
        display: flex;
        justify-content: space-around;
    }

    .B {
        width: 15%;
        height: 1%; /* literally any % works here for some reason */
    }

这里有一个CodePen来演示： http://codepen.io/milaniliev/pen/eZgZJz

我无法解释 为什么 有效。似乎实际高度百分比被忽略了。

Display:flex 拉伸百分比宽度图像

Display:flex stretching percentage width images

html

css

width

flexbox

display