CSSイメージの動的リサイズ

Question

ウィンドウのサイズを変更すると、背景イメージのサイズを動的に変更したい。画像の比率が変更されても問題ありません。だから私はこれをやろう方法が体にIMGため

width: 100vw; 
height: 100vh; 

を設定することです。

画像はタグなので、レイアウト上に他のタグが配置されているので、ほかのタグで画像を無視する方法はありません。

はまた、私は

body { 
    background-image: url("bckg.jpg"); 
    //hoooooow? 
} 

任意の提案のためにそれを行うための方法を見つけることができませんか？

Answer 1

あなたの背景画像はウィンドウサイズに合わせて拡大縮小したい場合は、理由を次のように使用していない：

body { 
    background-image: url("bckg.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

だから、重要な行はこれです：background-size: cover;これは背景画像が見える「をカバー」ことを保証しますあなたは、画像をトリミングに過ぎないしたくない場合はページ

Answer 2

の部分は、常に次の高さと幅試みの100％を取る：

body { 
    background: url('example.png') no-repeat fixed; 
    background-size: 100% 100%; 
} 

Fidd le here