52

幅 979 ピクセル、高さ 1200 ピクセルの写真タイプ (横向きではない) の背景画像があります。左にフロートするように設定し、(コンテンツの長さに関係なく) 上下にスクロールする必要なく、100% の完全な画像の高さを固定して表示したいと思います。

これは私の CSS コードですが、機能していません。

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
4

5 に答える 5

95

あなたが持っているコードでそれを行うことができます.100％の高さに設定されているhtmlことを確認するだけです.body

デモ: http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
于 2013-09-19T18:13:55.717 に答える
6

CSS はbackground-size: cover;でそれを行うことができます。

しかし、より詳細になり、より多くのブラウザーをサポートするには...

次のようなアスペクト比を使用します。

 aspectRatio      = $bg.width() / $bg.height();

フィドル

于 2013-09-19T18:10:43.747 に答える