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 に答える