1

我有一个图像将用作一系列“幻灯片”的背景，这些“幻灯片”都包含在一个页面中。总共有四张幻灯片。每张幻灯片都是屏幕的高度。所以我需要背景是 4x 屏幕高度。我还希望图像随屏幕宽度缩放。图像非常高，每张幻灯片上背景的哪一部分都无关紧要，因此保持纵横比应该不是问题。

我遇到的问题是，当我制作一个宽度小于图像宽度的窗口时，图像的一部分会被截断，而不是缩放到屏幕宽度。到目前为止我的CSS：

#container {
    position:relative;
    height:100%;
}
#background {
    position:absolute;
    width: 100%;
    height:400%;
    background:url(photo.png);
}
.slide {
    width: 100%;
    height:100%;
    position:relative;
}

和 HTML：

<div id="container">
    <div id="background"></div>

    <div class="slide">
        Content 1
    </div>
    <div class="slide">
        Content 2
    </div>
    <div class="slide">
        Content 3 
    </div>
    <div class="slide">
        Content 4
    </div>
</div>

注意，必须兼容 IE8 及以上（即 CSS3 的东西）

4

2 回答 2

2

也许你可以使用这样的东西：

<div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div>

而不是在css中

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

我不知道你为什么不想使用 css3，也许你有一些好的目的，但我仍然建议使用它。

CSS3代码是：

background-size: 100%;
于 2013-08-01T18:52:35.323 回答
1

您可以使用 Css3 属性Background-size 

#background {
    background-size: 100%;
    }
于 2013-08-01T19:09:12.960 回答