0

我想实现背景图像效果，类似于http://yipit.com/。

这是我目前拥有的：

<div id="landing-header">
    <img class="landing-background" src="{{ STATIC_URL }}images/new/landing-background.jpg"/>
</div>

#landing-header {
    height: 489px;
}
.landing-background {
    height: auto;
    min-width: 1460px;
    width: 100%;
    position: fixed;
    left: 0;
}

我想要完成的是水平宽度总是与浏览器一样宽，并且图像会相应地缩放。例如，如果它是一个500x200图像并且浏览器很1000px宽，则图像将缩放到1000x400. 这是有效的。

但是，我只希望容器400 px高。换句话说，我想在 处截断图像400px。例如，2000px浏览器宽度中的图像将为2000x800，但仅显示顶部400px。我将如何做到这一点？

请注意，我只希望在浏览器宽度大于图像宽度时调整图像大小，我不希望每次更改浏览器时都调整图像大小。

4

1 回答 1

2

您好，您可以通过CSS3 属性实现您想要的结果 background-size:cover;

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

查看演示：- http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

更新

查看更新后的演示，它是一个非常小的图像，而不是浏览器的宽度，因此它覆盖了整个背景：- http://tinkerbin.com/CraP8wBh

于 2012-07-05T04:35:39.663 回答