响应式，全尺寸图像的水平滚动

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. No 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; 

} 

赞成吗？

编辑：

我已经把一个简单的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宣言）。

我也注意到旧版浏览器在width:auto属性后附加!important声明会取得更好的成功。

我对这样的布局缺乏饥饿感到惊讶，所以如果这有助于任何人，那么请让我知道。

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/