Question

我试图为照片故事制作一个页面 - 它意味着水平滚动，但我也希望图像缩放到100％高度和自动宽度（所以没有裁剪）。水平滚动和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>

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

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％宽度和100％高度的背景图像。

您可以看到它的实时示例here

水平滚动页面上的100％宽度图像

2 个答案: