Question

我想使用图标进行导航。随着屏幕尺寸变小，我希望这些图标变小。目前，我有这个：

http://jsbin.com/yesitepuwo/edit?html,css,output [这可能是链接在firefox中不起作用？]

如您所见，图像首先崩溃，因此第二个图像低于第一个图像。如果你进一步调整窗口大小，它会变得更小，你可以看到图像调整得很好。

问题是：我不希望它们崩溃但只是为了调整大小。那我该怎么做呢？

另一个html标记完全没问题。但请注意，在较小的崩溃点上，我想显示一个汉堡菜单并制作一个类似于Android的平铺菜单，而不是将图标串在彼此之下。如果您的解决方案也尊重这一点，那就太好了。 [那自动折叠很好的地方，也许可以设置最小宽度到图像，以便它们再次折叠？]

谢谢：）

Answer 1

使用：

ul{
  padding: 0px;
  border: 1px solid red;
}
ul:after {content:'';display:block;clear:both;}
li{
  display:block;
  float:left;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

或者如果你想把它作为内联块：

ul{
  padding: 0px;
  border: 1px solid red;
}
li{
  display:inline-block;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

但是你必须删除li元素之间的所有空格，因为inline-block被视为单词，因此浏览器在它们之间显示空格（50％+空格+ 50％> 100％）。

Answer 2

所以，这里有两种方法可以正常工作：

https://jsbin.com/nexatoxewi/edit?html,css,output

https://jsbin.com/pibavejedo/edit?html,css,output

在屏幕上自动调整图片大小调整

2 个答案: