我正在尝试为照片故事制作一个页面-它的意思是水平滚动,但我也希望图像缩放到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>

最佳答案

如果允许,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;
}

10-07 16:23
查看更多