ブートストラップCSS：センターバックグラウンド、フルハイト、カットオフ幅

Question

現在のところ、ブラウザがモニタのサイズの半分であれば、幅に合わせて背景を縮小し、高さと下端をカットします。私は、それは代わりに、高さを維持したいページ全体を充填し、アスペクト比を維持するが、単に写真を中心と写真の側面をカット、私の現在のCSSは、任意のヘルプだけ

body{ 
    background-image: url("/background1.jpg"); 
    background-size: 100%; 
    background-repeat:no-repeat; 
    display: compact; 
} 

あると思いますどのようにこれを行うには素晴らしいでしょう、ありがとう

Answer 1

background-size: coverを追加すると、縦横比を保持する必要があります。

background-position: center;を追加すると、画像が中央に保存されます。

（divのルールを交換し、あなたのbodyにそれを置く - 私は、サンプルコードについてはこちらをdivを使用）

が

div { 
 
    background-image: url("http://placehold.it/1000/1000"); 
 
    /* Resizes image to fill div; retains aspect ratio. */ 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    min-height: 2000px; 
 
}

<div> 
 
    Lorem Ipsum 
 
</div>

Answer 2

background-size: cover; 

あなたが必要なものを行う必要があります。非常にエレガントにクロッピング/スケーリングを処理します。そのルールに

Answer 3

使用background-size: auto 100%;：（background-sizeで）

body { 
    background: url("/background1.jpg") center center no-repeat; 
    background-size: auto 100%; 
} 

最初のパラメータは、幅、画像の第2の高さです。ルールのように1つのパラメータしかない場合、ブラウザは幅とみなして高さをautoに設定します。私のバージョンはあなたに完全な高さを与え、自動的に幅を調整する必要があります（そしてイメージを中央に置く）