Question

我希望获得背景图片效果，类似于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。我将如何实现这一目标？

请注意，我仅希望在浏览器的宽度大于图片宽度时调整图片大小，我不希望每次浏览器更改时图片都会调整大小

Answer 1

嗨，您可以通过 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

背景图像全宽，有限的高度

1 个答案: