адаптивное изображение css

вообщем нужна помощь, в полно экраном режиме картинки все вместе (скрин 1) , а вот когда уменьшаешь размер то картинки вместе не становятся (скрин 2). только одна картинка по середине а две в самом низу, как можно сделать чтобы они как на (скрин 1) все были вместе, вот css:

<?

.gallery-4{
list-style-type: none;
margin: 5px;
display: inline-block;
padding: 0px;
}

.gallery-4 li{
display: inline-block;
padding: 0px;
position: relative;
overflow: hidden;
border: 1px solid #ffffff;
}

?>
Добавлено 29.01.16 в 18:31:26:
скрин 1
Добавлено 29.01.16 в 18:31:47:
скрин 2

Прикрепленные файлы:
PROFIWM_COM_5810_1461915_222.png (1.24 мб)
PROFIWM_COM_5810_1461915_111.png (1.66 мб)

Тема закрыта для обсуждения!