水平滚动页面上的100%宽度图片

Question

我正在制作一个照片故事的页面，希望它可以水平滚动，但我也希望图片能够自适应高度并自动调整宽度（因此不会裁剪）。水平滚动和100%高度/自动宽度没有问题。但我无法正确地排列图片 - 它们一直重叠在一起。见：http://i.imgur.com/nzOon.jpg 这个可能吗？我已经为此工作了很长时间，现在想不出更好的方法了。

谢谢！

JS:

<script type="text/javascript" charset="utf-8">
    $(function(){
            $(".image").wrap("<td>");
    });
</script>   

CSS：

.image {
position:absolute;
width:auto;
height:100%;
}   

HTML:

<div id="page-wrap">
         <div class="image">
              <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>

         <div class="image" style="margin-left:75%;">
               <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>             
</div>

- user1307028

---

请发布您的代码，这样我们就可以看到问题可能出在哪里。 - Keith

Answer 1

如果您允许HTML处理滚动和图像宽度，它会为您完成这些工作。

演示：http://jsfiddle.net/ThinkingStiff/sVa7S/ HTML代码：

<div id="scroll">
       <img src="http://thinkingstiff.com/images/priorities.png" /><!--
    --><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS（层叠样式表）：

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top;
}

- ThinkingStiff

---

非常感谢你。这让我整天都很疯狂。非常感激。 - user1307028

Answer 2

您可以使用以下CSS：

html, body {
    width: 100%;
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#image1 {
    background-image: url('image1');
}
#image2 {
    left: 100%;
    background-image: url('image2');
}
#image3 {
    left: 200%;
    background-image: url('image3');
}
#image4 {
    left: 300%;
    background-image: url('image4');
}​

使用背景图像，并设置宽度和高度均为100%。

您可以在此处看到其实际运行的示例。

- jacktheripper

---

非常感谢。这几乎就是我想做的事情 - 我希望图像重新调整大小到相同的比例。将背景大小设置为自动100％可以解决问题，但是图像之间的白色空间就会出现问题（请参见http://jsfiddle.net/WWUcD/3/）。有什么方法可以解决这个问题吗？谢谢！ - user1307028

你可以使用background-repeat: no-repeat;，看这个例子http://jsfiddle.net/WWUcD/5/。不确定为什么它有效，但它确实有效，所以谁会抱怨呢！ - jacktheripper

谢谢！我会用它作为封面页 - 真是太完美了。非常感谢。 - user1307028