CODEWITHSUNDEEP
ruby-on-railsrubyimageerb
Nicky Feller
Nicky Feller

Reputation: 3899

Resize image element using ERB and Rails

I am able to put an image into my rails app, but it has static size. I would like to change the size of this image.

My current code is

<%= image_tag("logo.png", :alt => "rss feed") %>

I though this might work

<%= image_tag("logo.png", :alt => "rss feed", height="42" width="42") %>

but it doesn't.

Upvotes: 0

Views: 4298

Answers (3)

user3373470
user3373470

Reputation:

You are actually on the right track! On a Rails view, you want to use hashes. The reason why your second example does not work is because it looks like height, a new object, is equal to 42. Instead, you want the height attribute of the object, just like you did with alt text.

Similar to making new ActiveRecord objects, you want to define the attributes of the image as a hash. When using image_tag, it goes as follows:

Sometimes html attributes will contain a dash. I am not sure of how ERB handles it, but you can always do rocket ship syntax, like: 'data-method' => :delete.

Given your example, this is the line that would work best. It allows the height and width to operate independently.

<%= image_tag("logo.png", alt: "rss feed", height: 42, width: 42) %>

No need to enter the numbers as a string. They are automatically interpreted as 42px when rendered. Finally, as someone has mentioned, it is usually best to do styling in CSS, but since (I am assuming) this size is being used on one image, it is okay (IMO).

Upvotes: 4

beaorn
beaorn

Reputation: 454

<%= image_tag("logo.png", size: "42x42", alt: "rss feed") %>

OR

<%= image_tag("logo.png", height: '42', width: '42', alt: "rss feed") %>

See here for more image_tag documentation: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag

Upvotes: 2

Yury Lebedev
Yury Lebedev

Reputation: 4015

You can do this:

<%= image_tag("logo.png", :alt => "rss feed", :height =>"42", :width => "42") %>

But it is better to do it in the css

Upvotes: 1

Related Questions