在Rails 4應用程序中使用圖像標記的全寬響應圖像

使用下面的代碼使標題圖像隨機出現在我製作的應用程序中。我想讓圖像跨越屏幕的整個寬度，但不知何故它不起作用。在Rails 4應用程序中使用圖像標記的全寬響應圖像

圖像尺寸爲寬1200像素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; 

}

在此先感謝，任何幫助，將不勝感激

來源

2016-08-05 DaudiHell

替換'風格： '高度：汽車;寬度：100％;'''與風格= '高度：汽車;寬度：100％;''。您將Ruby語法與HTML語法混合使用。 –

另外，這不是一個Rails問題，只是HTML和CSS。這取決於周圍的HTML和CSS; 「100％寬度」意味着什麼取決於包含圖像的內容。 –

那就是@Arup Rakshit，謝謝 – DaudiHell

-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; 

}

來源

2016-08-05 10:39:46 Amego

這裏沒有任何關於這個的隨機 – DaudiHell

在Rails 4應用程序中使用圖像標記的全寬響應圖像

回答

相關問題