volle Breite reaktionsfähiges Bild mit Bild-Tag in Rails 4 App

Question

Ich benutze den Code unten, um Header-Bilder erscheinen zufällig in einer App, die ich mache. Ich möchte, dass sich die Bilder über die gesamte Breite des Bildschirms erstrecken, aber irgendwie funktioniert es nicht.

die Bildgröße Breite 1200px X height360px

Ich habe diese Linie style: 'height:auto;width:100%;' zu dem Bild-Tag hinzugefügt, in der Hoffnung, es würde das Bild füllt die gesamte Breite des Bildschirms machen, aber es hat nicht den Trick.

Ich fühle mich hier irgendwie verloren, vermisse ich etwas? oder bin ich einfach total im dunkeln?

in meinen Kategorien/show.html.erb Ich habe diesen Code

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

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

In categories_controller.rb I

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 

dann im categories.scss ich diesen Code

haben haben

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

    background-size: cover; 

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

} 

danke im voraus, jede hilfe würde geschätzt werden

Answer 1

versuchen diese

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

}