Пропорциональное изменение размера прокручиваемого списка изображений в css

Question

У меня есть горизонтальный контейнер, занимающий всю ширину экрана и список изображений в нем, которые переполняют его по горизонтали. Я сделал контейнер «гибким» с высотой в процентах и ​​установил предел в px, чтобы он не превышал реальную высоту изображения. Я также установил высоту изображений не более чем на 100% от высоты контейнера.

Моя проблема заключается в поведении изображений при сжатии окна. Когда заданы параметры размера в теге изображений html, изображение не пропорционально, а когда нет параметров, изображение уменьшается пропорционально, но там между ними есть промежутки, и они не оставляют «оправдания».

Это кажется достаточно простым, но я не нашел, что я делаю неправильно. Также он должен быть чистым css, без javascript.

Example on JSFIDDLE

HTML:

<nav> 
    <ul class="clearfix"> 
    <li> 
     <a href=""> 
     <img width="100" height="150" src="http://placekitten.com/100/150" alt=""> 
     </a> 
    </li> 

    <li> 
     <a href=""> 
     <img src="http://placekitten.com/g/100/150" alt=""> 
     </a> 
    </li> 
    ... 
    </ul> 
</nav> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
} 
nav { 
    width: 100%; 
    overflow: hidden; 
    overflow-x: scroll; 
    height: 40%; 
    max-height: 150px; 
    background-color: white; 
} 
ul { 
    display: block; 
    width: 1200px; 
    height: 100%; 
    background-color: yellow; 
} 
li { 
list-style: none; 
display: block; 
float: left; 
} 
a { 
    display: block; 
    background-color: tomato; 
} 
img { 
    max-height: 100%; 
    width: auto; 
} 

Answer 1

Удалить свойство display:block элемента li

Answer 2

Вот Solution.

HTML-:

<div id="container"> 
    <div><img src="http://placekitten.com/100/150"></div> 
    <div><img src="http://placekitten.com/100/150"></div> 
    <div><img src="http://placekitten.com/100/150"></div> 
    <div><img src="http://placekitten.com/100/150"></div> 
</div> 

CSS-:

#container { 
    border: 10px solid black; 
    font-size: 0.1px; 
    height: 150px; 
    min-width: 600px; 
    overflow: hidden; 
    text-align: justify; 
} 
    #container div { 
    width: 150px; 
    height: 125px; 
    display: inline-block; 
    } 
    #container:after { 
    content: ''; 
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */ 
    display: inline-block; 
    } 

Сценарий

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

Из приведенного выше вы можете видеть, что при сжатии браузера изображения не отображаются неудобно, но сохраняют согласованность между изменениями разрешения, сохраняя свою позицию относительно последовательной. Надеюсь это поможет.