Question

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

我遇到的问题是，当我制作一个宽度小于图像宽度的窗口时，部分图像会被切断而不是缩放到屏幕宽度。我的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内容）

Answer 1

也许你可以使用类似的东西：

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

Answer 2

您可以使用Css3属性Background-size

#background {
    background-size: 100%;
    }

Div背景大于窗口高度不会缩放

2 个答案: