调整ruby中的图像大小以适应DIV

Question

我有一个图片需要在横幅内，但因为我使用的是html.erb文件，我必须使用ruby加载图像，所以我如何调整图像大小以使其适合。图像需要适合<div id="banner"></div>区域，我不知道如何调整图像大小来做到这一点

代码的html和ruby：

<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

您可以直接在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; }