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

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;

}

有接受者吗？

编辑：

我将一个简单的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/