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

Posted 2023-03-06

【中文标题】水平滚动页面上 100% 宽度的图像

【英文标题】：100% width images on horizontal scrolling page

【发布时间】：2012-06-13 10:01:15

【问题描述】：

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

【问题讨论】：

发布您的代码，以便我们了解问题所在

【参考方案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;

【讨论】：

！！！而已。太感谢了。这让我整天发疯。非常感谢。

【参考方案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

【讨论】：

非常感谢。这几乎正​​是我想要做的——我希望将图像重新调整为相同的比例。将 background-size 设置为 auto 100% 可以，但是图像之间的空白是错误的（请参阅jsfiddle.net/WWUcD/3）。有办法解决吗？谢谢！

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

谢谢！我会用它来做封面——太完美了。非常感谢。