Question

我正在尝试实现响应式水平滚动图像列表。

例如：

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

图像的宽高比不明。

我的要求：

我希望图像始终是浏览器窗口的100％高度。
我希望它们彼此相邻（不使用float;因此inline可能是最好的。）
我不想在窗口调整大小时打破图像的宽高比。
没有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之上{ {1}}声明）。

我还注意到在!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/

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

2 个答案: