1

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

例如：

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

}

有接盘侠吗？

编辑：

我已经把一个简单的小提琴放在一起，作为我在哪里使用它的一个例子。

任何帮助都会很棒...

4

2 回答 2

2

好的，我们开始吧。经过大量实验，我终于找到了我认为适合大多数浏览器的答案。似乎适用于 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

我对这样的布局缺乏渴望感到惊讶，所以如果这对任何人有帮助，请告诉我。

于 2013-09-21T20:00:21.387 回答
0

我明白你在使用 %. 因此，一种解决方案是也实现一些后备绝对宽度，以便在较低分辨率下图像不会重新调整大小。

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/

于 2013-09-16T20:09:38.797 回答