CODEWITHSUNDEEP
htmlcssruby-on-railsruby
Stanley Roy Chilton
Stanley Roy Chilton

Reputation: 71

resizing an image within ruby to fit within a DIV

I have an image that needs to be within the banner, but because i'm using a html.erb file i have to load the image with ruby so how do i go about resizing the image so it fits. the image needs to fit within the <div id="banner"></div> area, i'm not sure how to resize an image to do that though

the html and ruby for the code:

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

the css for the code:

#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%;
}

Upvotes: 0

Views: 1506

Answers (1)

Nitin
Nitin

Reputation: 7366

You can do it by directly passing size attribute in rails image_tag.

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

It might distorted your image dimension. You can also pass only height for that particular image_tag and width will managed automatically by image_tag.

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

In your banner due add css to align image in center.

#banner{ text-align: centre; }

Upvotes: 1

Related Questions