どのようにして背景画像の幅 - 高さの比率を維持し、幅と高さの間に標準に設定する側を選択できますか？

Question

バックグラウンドイメージで実行したいのは、ブラウザサイズとバックグラウンドイメージの比率に応じて幅または高さを拡張することです。

この画像では、画像はほとんど（ほとんど）伸びていません。私はイメージが元の比率を維持したい。基本的に、背景画像の幅と高さはブラウザ画面の幅と高さに従います。このスクリーンショットで

幅/高さ比がオリジナルよりも大きいため、画像は上下に拡張されなければなりません。そして、超過した部分はブラウザペインの外に出ていなければなりません。この一

、幅/高さ比が小さくなっています。比率を維持し、画像の高さをブラウザの高さに合わせる限り、画像を左右に引き伸ばす必要があります。

は..私は、私は、ブラウザの比率を検出し、それぞれの画像に合わせてどちら側に変更するif-then文のようなものを使用する必要がかもしれないと思うあなたは、私が何をしたいのかを理解することを願っています。あるいは、他の技術者がこの作業を行う必要がありますか？

Answer 1

のJavascriptの助けがなければ、私が使用することをお勧めは：

body { 
    background-image: url(image.jpg); 
    background-position: 50% 50%; 
    background-size: cover; 
} 

background-position: 50% 50%は、水平方向と垂直方向の画像を中心に説明します。 background-size: coverは画像全体をカバーします。

Demo