html - 响应式全宽平铺图像

Question

我有一个全宽 div (#instagram)，其中有一个无序列表的图像(lis 的数量各不相同)。我希望 ul(及其子项)在 div 内部居中并向两个方向扩展而不换行到下一行。我在下面附上了一张图表。我如何以响应式方式实现它？

<div id = "instagram">
  <ul class="photos">
      <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
  </ul>
</div>

更新:我意识到我的图表看起来有点像旋转木马，但这不是我要找的。我不需要任何“分页”功能。另外，我希望图像像我展示的那样在边缘被切断。

更新 #2 这是一个开始的 jsfiddle - http://jsfiddle.net/MULCU/

Answer 1

如果您添加一个额外的包装器，您可以将图像居中并剪掉任何一侧的多余部分:

#instagram {
    position:relative;
    overflow:hidden;
    background-color:blue;
    padding:20px 10px;
    text-align:center;
}
#instagram .bounds {
    width:2000%;
    padding-left:50%;
    text-align:center;
}
#instagram ul {
    list-style-type:none;
    padding:0;
    margin:0;
    margin-left:-100%;
    background-color:green;
    white-space:nowrap;
    text-align:center;
}
#instagram ul li {
    display:inline-block; 
    margin:10px;
    padding:0;
}

查看我的 working Fiddle