'full width responsive image with image tag in Rails 4 app

Im using the code below to make header images appear randomly in a app I´m making. I want the images to span the whole width of the screen but somehow it is not working.

the image size is width 1200px X height360px

I've added this line style: 'height:auto;width:100%;' to the image tag, hoping it would make the image fill the width of the screen, but it didn't do the trick.

I'm feeling kind of lost here, am I missing something? or am I just totally in the dark?

in my categories/show.html.erb I have this 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 have 

 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

then in the categories.scss I have this code

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

    background-size: cover;  

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

}

thanks in advance, any help would be appreciated

cssruby-on-railsrubyimagerandom


Solution 1:[1]

I was able to do this on our breakdiving.io community, and it worked, using the <%= and image_tag, as follows:

<figure>
  <%= image_tag("wyseguidance-small.jpg", alt: "Break Diving Advertising Photo", style: "height:auto;width:100%;") %>
</figure>

Maybe this will help someone. Now, the photo is mobile responsive.

See also my comment above.

Solution 2:[2]

try this 

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

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Monroe Mann
Solution 2 Amego

Related Questions