自适应全角平铺图像

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

我尝试了white-space：nowrap属性，这就是我得到的。 我为整个内容设置了最大宽度，因此您必须摆弄屏幕尺寸才能看到“响应性”。

#instagram {
    overflow:hidden;
    width:100%;
    background-color:red;
    padding:10px 0;
    max-width:400px;
}

.photos {
    background-color:orange;
    height:50px;
    padding:10px 0;
    position:relative;
    white-space:nowrap;
}

.photos li {
    width:50px;
    height:50px;
    display:inline-block;
    list-style:none;
    background-color:yellow;
    margin-right:10px;
}

C

<div id = "instagram">
    <ul class = "photos">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

的jsfiddle

Answer 2

如果添加额外的包装器，则可以将图像居中并裁剪掉多余的两面 ：

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

见我正在工作的小提琴

Answer 3

如果您考虑使用div而不是ul，它将使解决方案变得更好，更轻松。 考虑下面的代码。 这将使用固定像素定义#instagram div（但它将更改为％），并以此为基础进行其他设置。 这使解决方案具有响应能力。

我还将代码放在此jfiddle上： http : //jsfiddle.net/cB7e4/

<div id = "instagram">
  <div class="photos">
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
  </div>
</div>

<style>
#instagram
{
    width: 500px;
    height: 100px;
    background: #3AD7FF;
    position: absolute;
}

.photos
{
    width: 98%;
    height: 80%;
    margin-top: 2%;
    background: #B8FCCD;
    padding: 0% 1%;
    overflow-x:scroll;
    white-space:nowrap;
}

.images
{
    margin: 1.5% 1% 1% 0%;
    height: 80%;
    background: #F2FEE2;
    display: inline-block;
    position: relative;
}

.images img
{
    height: 100%;
}
</style>

Answer 4

这样怎么样？

.photos
    {
        list-style-type:none;
    }
    .photos li {
        float: left;
        margin:0px 5px 0px 5px;
    }

li元素向左浮动，并且图片之间有很小的空白