调整红宝石内的图像以适合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

回答

相关问题