調整紅寶石內的圖像以適合DIV

我有一個圖像，需要在橫幅內，但因爲我使用的是html.erb文件，我必須加載圖像與紅寶石，所以我怎麼去調整圖像大小，使其適合。圖像需要適應<div id="banner"></div>區域內，我不知道如何來調整圖像大小，雖然這樣做調整紅寶石內的圖像以適合DIV

HTML和紅寶石的代碼：

<div id='home_header'> 
<div id='banner'><%= image_tag("banner.png", :alt=> "banner")%></div> 
</div>

的CSS的代碼：

#home_header { 
background-color: #20C0CF; 
position: absolute; 
z-index: 0; 
width: 98%; 
height: 10%; 
left: 0%; 
top:0%; 
border-bottom-style: ridge; 
border-color: #0099FF; 
border-bottom-right-radius: 100px; 
} 
#banner{ 
background-color: #FFFFFF; 
position: absolute; 
width: 30%; 
height: 90%; 
}

來源

2016-04-06 Stanley Roy Chilton

你的問題還不清楚。「在Ruby中」是什麼意思？ ERB不會「加載圖像」，它只是生成HTML。如果這是您通常用HTML和CSS解決的問題，那麼您將通過編寫生成該HTML並編寫相同CSS的ERB來解決Rails問題。具體來說，你有什麼困難？ –

它的好處我已經排序:) –

你可以通過直接傳遞size屬性在rails image_tag中來完成。

<div id='banner'><%= image_tag "banner.png", :alt=> "banner", :size => '100X100'%></div>

它可能會扭曲您的圖像尺寸。您也可以僅傳遞該特定的高度image_tag，寬度將由image_tag自動管理。

<div id='banner'><%= image_tag "banner.png", :alt=> "banner", :height => '100px' %></div>

在您的橫幅到期添加css中心對齊圖像。

#banner{ text-align: centre; }

來源

2016-04-06 04:13:30

所以我不能使用CSS的呢？在所有？ –

你不需要做。我認爲這會解決你的問題。如果你想要的話，你可以在banner div中使用背景添加一些黑色區域。所有這些對於所有尺寸的圖像來說都很不錯。 –

它只是標題是依賴於屏幕尺寸，所以如果圖像是一個固定的大小，它會在一些屏幕上越過邊緣 –

調整紅寶石內的圖像以適合DIV

回答

相關問題