Rails 4のアプリでイメージタグ付きの全幅応答の画像

Question

私が作っているアプリでは、ヘッダー画像をランダムに表示するために以下のコードを使用しています。私は画像が画面の全幅に広がるようにしたいが、何とかそれは動作していない。

画像サイズは幅1200px X height360px

私はそれは画像が画面の幅いっぱいになるだろう期待して、画像タグには、このラインstyle: 'height:auto;width:100%;'を追加しましたが、それはトリックをしませんでした。

私はここで迷っていると感じています。何か不足していますか？または私はまったく暗闇の中にいるのですか？私は

def show 
    @products = @category.products 
    @images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"] 
    @random_no = rand(5) 
    @random_image = @images[@random_no] 
    end 

を持っている私のカテゴリ/ show.html.erbで

私はこのコードcategories_controller.rbで

<header id="necklace_header" class="img-responsive"> 

    <img src="/assets/rand_headers/<%= @random_image%>", style: 'height:auto;width:100%;' > 
    <h1> 
     <%= @category.name %> 
    </h1> 
</header> 

を持っているが、その後categories.scssに私はこのコード

を持っています

#necklace_header { 
    width: 100%; 
    background-repeat:no-repeat; 
    background-position: top center; 

    background-size: cover; 

    height: 360px; 
    margin-bottom: 20px; 

} 

ありがとうございました。ご了承ください。

Answer 1

`スタイルを置き換えるこの

#necklace_header { 
    width: 100%; 
height: 360px; 
background-image: url(your_image_path.jpg); 
background-size:  cover;      
background-repeat: no-repeat; 
background-position: center center; 

}