Отзывчивая горизонтальная прокрутка полноразмерных изображений

Question

Я пытаюсь реализовать отзывчивый горизонтально прокрученный список изображений.

Например:

<ul> 
    <li> 
    <img src="image1.jpg"/> 
    </li> 
    <li> 
    <img src="image2.jpg"/> 
    </li> 
    <li> 
    <img src="image3.jpg"/> 
    </li> 
</ul> 

Изображения неизвестного соотношение ширины и высоты.

Мои требования:

1. Я хочу, чтобы изображения всегда быть высота окна браузера 100% во все времена.
2. Я хочу, чтобы они были рядом друг с другом (без использования float, поэтому inline, вероятно, лучше всего).
3. Я не хочу нарушать соотношение ширины и высоты изображений при изменении размера окна.
4. Нет javascript.

До сих пор я пытался с этим CSS, но я не могу показаться, чтобы получить изображения не раздавит, когда окно браузера изменяется:

ul{ 

    width:100%; 
    overflow-y:scroll; 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 0; 

} 

ul li{ 

    display:inline; 

    height:100%; 

} 

ul li img{ 

    max-height:100%; 
    width:auto; 

} 

Есть берущих?

Edit:

Я поставил простой fiddle вместе для примера, где я нахожусь с ним.

Любая помощь будет большим ...

Answer 1

Хорошо здесь мы идем. После долгих экспериментов я наконец нашел то, что, по моему мнению, было ответом для большинства браузеров. Кажется, работает на Firefox 3.5+, Safari 4+, Chrome 3+. Я также тестировал на устройстве iOS, устройстве Android и IE, хотя и не очень широко.

* очищает горло *

html, body{ 

    width:100%; 
    height:100%; 

} 

html, body, ul, li{ 

    padding:0; 
    margin:0; 
    border:0; 

    text-decoration:none; 

} 

ul{ 

    width:100%; 
    height:100%; /* CHANGE */ 

    overflow-y:scroll; 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 0; 

} 

ul li{ 

    display:inline; 

    height:100%; 

} 

ul li img{ 

    max-height:100%; 
    height:100%; /* CHANGE */ 
    width:auto !important; /* CHANGE */ 

} 

кажутся Основными факторами, которые необходимо убедиться, что height свойства 100% вплоть до последнего узла в списке, в том числе img (на вершине его max-height декларация).

Я также заметил, что лучший успех в старых браузерах добавляет объявление !important после свойства width:auto.

Я удивлен отсутствием голода для такого макета, так что если это помогло кому-нибудь, тогда, пожалуйста, дайте мне знать.

Answer 2

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

CSS

html, body{ 

    width:100%; 
    height:100%; 

} 

html, body, ul, li{ 

    padding:0; 
    margin:0; 
    border:0; 
    text-decoration:none; 

} 

ul{ 
    min-width:150px 
    width:100%; 
    overflow-y:scroll; 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 0; 

} 

ul li{ 

    display:inline; 
    height:100%; 
} 

ul li img{ 

    min-width:150px 
    max-height:100%; 
    width:auto; 

} 

http://jsfiddle.net/MkLd4/