Rails Image Định lại kích thước trên màn hình Xem?

Question

Làm cách nào để thay đổi kích thước hình ảnh hiện tại thành "260x180?"

Tôi đang sử dụng Carrierwave và Rmagick hiện tại để tải hình ảnh lên thùng lưu trữ Amazon S3 của tôi và tạo 2 phiên bản của hình ảnh: bản gốc và phiên bản ngón tay cái (70x70). Bây giờ, tôi biết rằng tôi có thể tạo một phiên bản khác để ba phiên bản sẽ được tạo, bao gồm cả 260x180, nhưng tôi cảm thấy như đã làm quá tải cơ sở dữ liệu lưu trữ, và tôi tự hỏi liệu tôi có thể làm điều đó trên một máy tính hay không. cấp độ xem.

tôi đã cố gắng

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

nhưng nó có vẻ như nó không làm việc - những hình ảnh không phải là kích thước giống hệt nhau.

Ngoài ra, nếu hình ảnh nhỏ hơn sản lượng mong muốn của tôi, tôi có cần phải làm điều gì đó khác với hình ảnh lớn hơn không? Ví dụ, tôi cần phải cắt những cái lớn hơn, nhưng mở rộng những cái nhỏ hơn, hoặc nó sẽ tự động mở rộng kích thước mong muốn?

Answer 1

Giống như @Yosep nói, không có gì huyền diệu của đường ray xảy ra ở đây. <%= image_tag %> tạo thẻ <img> trong kết quả html. nếu bạn vượt qua số :size => '260x180', kết quả là thẻ <img> sẽ có số width và height được đặt thành 260 và 180.

Đây là câu trả lời cho câu hỏi của bạn. cách tốt nhất để cung cấp kích thước hình ảnh khác, là cách bạn đã từ chối ngay từ đầu. Bạn cần phải thay đổi kích thước những hình ảnh đó trong phần phụ trợ và lưu trữ chúng ở đâu đó.

Thay đổi kích thước hình ảnh bằng cách đặt chiều rộng và chiều cao của thẻ <img> sẽ không giữ tỷ lệ khung hình gốc của hình ảnh. nếu tỷ lệ ban đầu là 260: 180 thì tốt thôi. Nhưng nếu không, kết quả sẽ xấu. Bên cạnh đó, có một nhược điểm của việc làm như vậy, đó là lý do tương tự mà bạn không nên thay đổi kích thước hình ảnh bằng cách sử dụng CSS cũng. Thay đổi kích thước hình ảnh lớn thành những hình ảnh nhỏ hơn ở phía khách hàng cuối cùng sẽ là một sự lãng phí lớn cho mạng của bạn và làm như vậy sẽ làm chậm việc hiển thị trang web của bạn. Đó là một trong những quy tắc của YSlow.

Để đổi kích thước hình ảnh bằng CSS, bạn có thể sử dụng max-width và max-height, hình ảnh lớn hơn sẽ được thay đổi kích cỡ tương ứng, hình ảnh nhỏ hơn sẽ không được thay đổi kích thước.

Answer 2

Trong chế độ xem, không xử lý hình ảnh mới? Theo quy ước, bạn sẽ sử dụng CSS.

.image_container img { 
    width: 260px; 
    height: 180px 
} 

Và đây là một số cách thú vị để cắt với CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

Tất cả Rails không, khi nhìn thấy mã của bạn, là để biến

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

vào một cái gì đó giống như

<image tag="image.jpg" width="260" height="190" ../> 

trên trang (HTML).

Điều đó nói rằng, nếu mã của bạn không giống như nó làm việc, cố gắng gán một lớp CSS với nó:

.image-size { 
    max-width: 300px; 
    max-height: 200px; 
} 

Answer 4

Nếu bạn muốn, bạn có thể sử dụng thay đổi kích thước hình ảnh tự động của chúng tôi trong đám mây.Ví dụ, lệnh sau sẽ thay đổi kích thước hình ảnh để điền vào một hình chữ nhật 260x180.

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %> 

blog post này mô tả làm thế nào để sử dụng CarrierWave trong khi tất cả các hình ảnh được lưu trữ trong đám mây, cung cấp thông qua một CDN nhanh và tất cả các biến đổi được tự động thực hiện trong đám mây (không cần cài đặt RMagick).