Rails Image Ridimensionamento sul display View?

Question

Come ridimensionare un'immagine esistente, ad esempio "260x180?"

Attualmente utilizzo Carrierwave e Rmagick per caricare immagini nel mio bucket di archiviazione Amazon S3 e crea 2 versioni dell'immagine: l'originale e la versione per il pollice (70x70).

Ora, so che posso creare un'altra versione in modo che vengano create tre versioni, incluso il 260x180, ma mi sembrava che si stesse intasando il database di archiviazione e mi chiedevo se avrei potuto farlo su un livello di vista

ho cercato

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

ma sembra che non funziona - le immagini non sono dimensioni identiche.

Inoltre, se l'immagine è più piccola dell'uscita desiderata, devo fare qualcosa di diverso rispetto alle immagini più grandi? Ad esempio, devo tagliare quelli più grandi, ma espandere quelli più piccoli o scalerà automaticamente alla dimensione desiderata?

Answer 1

Come @Yosep detto, non c'è nulla di magico di rotaie succedendo qui. <%= image_tag %> genera un tag <img> nel codice HTML del risultato. se si passa un :size => '260x180', il tag risultato <img> avrà il suo width e height insieme a 260 e 180.

Ecco che arriva la risposta per la tua domanda. il modo migliore per fornire un'altra dimensione di immagine è il modo in cui hai rifiutato all'inizio. È necessario ridimensionare le immagini nel back-end e memorizzarle da qualche parte.

Il ridimensionamento dell'immagine impostando la larghezza e l'altezza del tag <img> non manterrà le proporzioni originali dell'immagine. se il rapporto originale è 260: 180, allora va bene. Ma se no, il risultato sarà brutto. Inoltre, c'è un altro svantaggio di farlo, che è la stessa ragione per cui non si dovrebbe ridimensionare l'immagine usando anche i CSS. Ridimensionare le immagini di grandi dimensioni in quelle più piccole sul lato client sarà un enorme spreco della tua rete, e così facendo rallenterai il rendering del tuo sito. Questa è una delle regole di YSlow.

Per ridimensionare l'immagine tramite CSS, è possibile utilizzare max-width e max-height, le immagini più grandi verranno ridimensionate di conseguenza, quelle più piccole non verranno ridimensionate.

Answer 2

In una vista, senza elaborare una nuova immagine? Per convenzione, dovresti usare i CSS.

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

e qui ci sono alcuni modi interessanti per ritagliare con i CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

Tutti Rails fa, quando abbiamo visto il codice, è quello di trasformare

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

in qualcosa di simile

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

nella pagina (HTML).

Detto questo, se il codice non sembra che stia funzionando, cerca di assegnare una classe CSS ad esso:

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

Answer 4

Se si desidera è possibile utilizzare il nostro ridimensionamento automatico delle immagini nel cloud.Ad esempio, il seguente comando ridimensionerebbe l'immagine per riempire un rettangolo 260x180.

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

Questo blog post descrive come utilizzare CarrierWave mentre tutte le immagini sono memorizzati nella cloud, forniti attraverso un veloce CDN e tutte le trasformazioni sono fatte in modo dinamico nella nube (non è necessario installare RMagick).