2012-04-17 14 views
33

tengo una etiqueta de imagen de la siguiente manera:Cómo el estilo de una etiqueta de imagen en Ruby on Rails

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

¿Cómo podría el estilo de un color de borde a un lado de esa imagen en CSS? ¿Qué html produciría eso?

+0

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

Respuesta

39

Añadir una clase o id para su image_tag:

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

Entonces utilizar CSS para diseñarlo:

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

mediante el uso de la opción de "estilo":

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

para su posterior información, por favor revisa la API.

13

también se puede dar estilo en línea, así

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

Inténtelo .....

2

Para otros que vienen con esto en Google. Si usa una etiqueta de imagen de una manera diferente, puede agregarle clase CSS, pero solo tiene una sintaxis diferente. A veces necesitas usar un servidor externo. (Despliegue en Heroku? => Amazon s3)

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

Esta es una forma sencilla de hacerlo.

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

Gracias, necesitaba esto para enviar una imagen con estilo en un correo electrónico. – saadlulu

0

jquery no está cambiando la imagen. Aquí está mi script

$(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

En las nuevas versiones de los carriles, hay una manera "mejor":

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