2012-04-17 5 views
33

Ich habe ein Image-Tag, um Stil wie folgt:Wie ein Image-Tag in Ruby on Rails

<%= image_tag @user.photo.url(:large) %> 

Wie könnte ich eine Rahmenfarbe auf eine Seite des Bildes in CSS-Stil? Welche HTML würde das produzieren?

+0

ähnlich wie http://stackoverflow.com/questions/10136487/how-to-style-buttons-in-ruby- on-rails/10136528 # 10136528 – Vik

Antwort

39

Fügen Sie eine Klasse oder ID zu Ihrem image_tag:

<%= image_tag @user.photo.url(:large), :class => "style_image" %> 

Dann css verwenden es, um Stil:

.style_image { 
    border-right: 1px solid #000; 
} 
58

unter Verwendung von "Stil" Option:

<%= image_tag @user.photo.url(:large), :style => "border: 1px solid red" %> 

für weitere Info, bitte überprüfen Sie die API.

13

Sie können auch Inline-Stil geben auch

<%= image_tag @user.photo.url(:large), :style => "float :left;border 1px solid #00000;" %> 

Try it .....

2

Für andere, die über diese auf Google kommen. Wenn Sie ein Bild-Tag auf eine andere Weise verwenden, können Sie trotzdem eine CSS-Klasse hinzufügen, aber es ist nur eine andere Syntax. Manchmal müssen Sie einen externen Server verwenden. (Bereitstellung auf Heroku? => Amazon S3)

<%= image_tag("https://s3-us-west-2.amazonaws.com/mybucketname/user_photo.png", class: "style_image") %> 
4

Dies ist eine einfache Möglichkeit, es zu tun.

<%= image_tag("example.png", :style => 'border-right: 1px solid #000;')%> 
+0

Danke, ich brauchte das, um ein formatiertes Bild in einer E-Mail zu senden. – saadlulu

0

jquery ändert das Bild nicht. Hier ist mein Skript

$(document).ready(function() { 
$('img').click(function(e) { 
    var newclass = $(this).attr("id"); 
    var oldclass = $("product_image_container_show image-center").attr('Class'); 
    $("#product_image_container_show image-center").fadeOut(function(){ 
     $("#product_image_container_show image-center").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }) 
}) 

});

2

In neueren Versionen von Rails, gibt es eine "bessere" Art und Weise:

<%= image_tag('filename_in_public_folder', alt: 'Description', style: 'display: block; margin: auto; width: 40%;')%>