動的高さの自動高さ画像

Question

height:autoについて多くの情報を検索しましたが、私の問題の解決策が見つかりませんでした。私は、ダイナミックな高さと全幅の画像を必要とするが、それは動作しません:(誰でも

はHTML

!?助けることができる：私のjsFiddle

<div id="roster"> 
<div class="image"></div> 
</div> 

CSS

#roster{} 

#roster .image{ 
    background-image:("http://nhlawyer.net/wp-content/uploads/header-image-2.jpg"); 
    width:100%; 
    height:auto; 
} 

あり

Answer 1

あなたがイメージを作る場合、あなたはあなたbackgroundとして画像を使用している場合width:100%;その高さが自動

#roster img{ 
 
\t width:100%; 
 
}

<div id="roster"> 
 
    <img src="http://nhlawyer.net/wp-content/uploads/header-image-2.jpg"> 
 
</div>

なりませんbackground-imageとして、デフォルトで<img>タグとして画像を使用する必要があります要素の特定の高さを与える必要があります。background-size: cover;

Answer 2

試してみてください

#roster .image { 
    background: url('https://nhlawyer.net/wp-content/uploads/header-image-2.jpg'); 
    width: 100%; 
    height: 250px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
}