Rails 4应用程序中带有图像标签的全宽响应图像

Question

我正在使用下面的代码使标题图像随机出现在我正在制作的应用程序中。我希望图像跨越屏幕的整个宽度，但不知何故它不起作用。

图片大小为宽1200px X height360px

我已将这一行 style: 'height:auto;width:100%;' 添加到图像标签中，希望它能使图像填满屏幕的宽度，但它没有成功。

我感觉有点迷失在这里，我错过了什么吗？还是我完全处于黑暗之中？

在我的类别/show.html.erb 我有这个代码

<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_controller.rb 我有

 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

然后在 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; 

}