DIV内に入るように画像をリサイズする

Question

私はバナーの中にある必要がある画像を持っていますが、html.erbファイルを使用しているので画像をロードする必要があります画像が収まるように画像のサイズを変更します。画像は私が行うために、画像のサイズを変更するかどうかはわかりません、<div id="banner"></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%; 
} 

Answer 1

レールのサイズ属性を直接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; }