背景画像はリサイズを中心に縮尺を保持

Question

私はこれが簡単だと思っていますが、ここでは私がやっているコードですが、一つのことを除いて完全に動作します。それは広くなり、次に愚かに見えます。リサイズ時に

.div1 { 
background-image: url("images/headerbgimage2.jpg"); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
background-position: center center; 
} 

画像はスケールし、それが（広い）より大きくなるにつれて、より小さなサイズで、それは通常見えますが、それは伸びると厄介に見えます。どのようにしてイメージがそのアスペクトを保持し、全体のdivを覆い、イメージをスケーリングしたままにしているだけで「ズームする」ようにすることができます。

サイトでこの作業の例はtechhubdenver .COM彼らのトップのdivの背景画像

と、これはCSSで行うことができているか、私はこれをやろうとしてコーディングいくつかのJavascriptを取得する必要があります。

レスポンシブタイプのページで新しい画像を作成する方法はわかっていますが、画像を1つ使用してデバイスに関係なく機能させることを望んでいました。画面サイズが画像サイズから離れている（小さ過ぎるか広すぎる）場合にのみ問題になります。

画像がちょうど "縮む"が小さいデバイスのアスペクト比を維持するなら、それはうまくいくと思うし、画面サイズが大きくなるとイメージがちょうど "ズームイン"それはうまくいくでしょう。

ズームインするには、縦横比を保持し、常にdivを入力してください。これは私の目標です。

Answer 1

background-size: cover;が必要です。それは要素をカバーするように背景を拡大します。

.div1 { 
    background-image: url("images/headerbgimage2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
}