Làm thế nào để tạo kiểu thẻ hình ảnh trong Ruby on Rails

Question

Tôi có một thẻ hình ảnh như sau:

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

Làm thế nào tôi có thể phong cách một màu biên giới sang một bên của hình ảnh đó trong CSS? Những gì html sẽ sản xuất?

Answer 1

Thêm một lớp hoặc id để IMAGE_TAG của bạn:

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

Sau đó sử dụng css để định dạng:

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

Answer 2

bằng cách sử dụng "phong cách" tùy chọn:

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

để biết thêm thông tin, vui lòng kiểm tra API.

Answer 3

bạn cũng có thể cung cấp cho phong cách nội tuyến cũng

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

Thử .....

Answer 4

Đối với những người đi qua này trên Google. Nếu bạn sử dụng thẻ hình ảnh theo cách khác, bạn vẫn có thể thêm lớp css vào nó, nhưng nó chỉ khác cú pháp. Đôi khi bạn cần phải sử dụng một máy chủ bên ngoài. (Triển khai trên Heroku? => Amazon s3)

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

Answer 5

Đây là cách đơn giản để thực hiện.

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

Answer 6

jquery không thay đổi hình ảnh. Đây là tập lệnh của tôi

$(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'); 
    }) 
}) 

});

Answer 7

Trong các phiên bản mới hơn của Rails, có một "tốt hơn" cách:

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