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

试试这个：

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

.B {
    max-width:100%;
}

Answer 2

您可以使用px而不是％并使用以下代码

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

Answer 3

要让display: flex分配空间而不会压缩图像，您可以将图像转换为<div>，然后将图像设置为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

我没有解释为什么有效。似乎忽略了实际高度％。

显示：柔性拉伸百分比宽度图像

3 个答案: