Изменение размера изображения автоматически при изменении размера экрана

Question

Я хочу сделать навигацию с помощью значков. Я хочу, чтобы эти значки уменьшались по мере уменьшения размера экрана. В настоящее время у меня это:

http://jsbin.com/yesitepuwo/edit?html,css,output [? Это возможно, что ссылка не работает в Firefox]

Как вы видите, изображение первый коллапс, так что вторая ниже первой. Если вы измените размер окна, чтобы он стал еще меньше, вы можете увидеть, что изображения сильно изменяются.

Проблема в следующем: я не хочу, чтобы они рушились, но только для изменения размера. Итак, как мне это сделать?

Еще одна наметка html полностью прекрасна. Но, пожалуйста, не надо, что в нижней части коллапса я хотел бы отобразить меню гамбургеров и сделать андроид, как, черепичное меню istead из значков, нанизанных ниже друг друга. Было бы неплохо, если бы ваше решение также уважало это. [Вот где автоматически рушится хорошо, может быть, можно установить мин ширину изображений, чтобы они снова сужаются?]

спасибо :)

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%;} 
} 

, но тогда вы должны удалить все пробелы между вашими Lī элементами, так как встроенный блок рассматриваются как слова, так браузер отображает пробелы между ними (50% + пространство + 50%> 100%).

Answer 2

Итак, здесь есть два подхода, которые работают, как я хотел, чтобы работать:

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

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