我正在尝试编写响应式基于图标的菜单栏。我正在使用 display:flex 来执行此操作，但我遇到的问题是当页面按比例放大或缩小时，图像一直想要水平拉伸(stretch)或挤压。如果它们只是相对移动并统一缩放，那将是更好的解决方案。
我做错了什么？
<!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>
最佳答案
拥有display: flex在不压缩图像的情况下分配空间，您可以将图像转换为，比方说，<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
我无法解释为什么会这样。似乎忽略了实际高度 %。
关于html - Display:flex 拉伸(stretch)百分比宽度图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36046014/