divの背景を設定してブラウザのサイズに合わせてサイズを変更するにはどうすればよいですか？

Question

私のウェブサイトのホームページをデザインしようとしています。ここでimを使ってイラストを表示しています。

divの全体のサイズをカバーする画像を使用したいと思います。

画像のサイズは1920x850です。

これはdiv要素

<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div> 

CSSのコードです：私は、さまざまな画面サイズの画像を表示できるようにしたいが、それは常に（カットオフます

#widget-static-block-1 { 
background: url({{ d_banner1.jpg' | asset_url }}); 
width:100%; } 

高さまたは幅のいずれかで再生しようとしました。

私がheight:850px;に設定した場合、それは明らかに1080p sceenで完全に表示されますが、小さな画面では切り取られます。

私が明確にしたいことは、全画像をすべてのブラウザサイズで常に表示したいということです。高さまたは幅で切り取る必要はありません。

Answer 1

divを親（高さまたは幅）に入力するように指定しているようです。背景画像が切り取られないようにするには、アスペクト比を維持する必要があります。

これは何が必要になります。Maintain aspect ratio of div but fill screen width and height in CSS?

Answer 2

background-size: 100% 100%またはbackground-size: 100vw 100vhを試してください。あなたのdivがすべてのメディアに合っていることを確認したい場合は、vwとvh単位を使用できます。

Answer 3

の作業例

を背景に、DIVにスタイルを追加します。

background-repeat: no-repeat; 
background-position: center center; 
background-size: cover; 

あなたは結果を表示するには、ウィンドウのサイズを変更することができます。

html, body { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    top: 0; 
 
    left: 0; 
 
    
 
    background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

<div> 
 

 
</div>