web-dev-qa-db-fra.com

Rails Image Re-dimensionnement sur affichage?

Comment redimensionner une image existante en "260x180?"

J'utilise actuellement Carrierwave et Rmagick pour télécharger des images dans mon compartiment de stockage Amazon S3. Il crée deux versions de l'image: l'original et la version miniature (70x70).

Maintenant, je sais que je peux créer une autre version pour créer trois versions, y compris la 260x180, mais j’ai eu l’impression que cela saturait la base de données de stockage et je me demandais si je pouvais le faire au niveau de la vue.

J'ai essayé

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

mais il semble que cela ne fonctionne pas - les images ne sont pas de tailles identiques.

De plus, si l'image est plus petite que la sortie souhaitée, dois-je faire quelque chose de différent des images plus grandes? Par exemple, ai-je besoin de couper les plus gros, mais d'agrandir les plus petits, ou est-ce que la taille sera automatiquement ajustée à la taille souhaitée?

ruby-on-railscssimage-processing
15
kibaekr

Comme @Yosep l'a dit, rien de magique à Rails qui se passe ici. <%= image_tag %> génère une balise <img> dans le résultat HTML. Si vous passez un :size => '260x180', les balises <img> et width et height seront définies sur 260 et 180.

Voici la réponse à votre question. La meilleure façon de fournir une autre taille d'image est la façon dont vous avez refusé au début. Vous devez redimensionner ces images dans le backend et les stocker quelque part.

Redimensionner l'image en définissant la largeur et la hauteur de la balise <img> ne conservera pas le rapport de format d'origine de l'image. si le rapport initial est 260: 180, alors c'est bon. Mais sinon, le résultat sera moche. En outre, cela présente un autre inconvénient, pour la même raison que vous ne devez pas redimensionner une image à l'aide de CSS également. Redimensionner des images volumineuses en images plus petites côté client finira par constituer un énorme gaspillage de votre réseau, ce qui ralentira le rendu de votre site. C'est l'une des règles de YSlow.

Pour redimensionner une image en utilisant CSS, vous pouvez utiliser max-width et max-height, les images plus grandes seront redimensionnées en conséquence, les plus petites ne seront pas redimensionnées.

28
nil

Tout ce que fait Rails, quand on voit votre code, est de tourner

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

dans quelque chose comme

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

sur la page (HTML).

Cela dit, si votre code ne semble pas fonctionner, essayez de lui attribuer une classe CSS:

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

Si vous le souhaitez, vous pouvez utiliser notre redimensionnement automatique des images dans le nuage. Par exemple, la commande suivante redimensionnerait l'image pour remplir un rectangle 260x180.

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

Cet article blog décrit comment utiliser CarrierWave lorsque toutes les images sont stockées dans le nuage, transmises via un CDN rapide et que toutes les transformations sont effectuées de manière dynamique dans le nuage (inutile d'installer RMagick).

3
Cloudinary

Dans une vue, sans traiter une nouvelle image? Par convention, vous utiliseriez CSS.

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

Et voici quelques méthodes intéressantes pour recadrer avec CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

1
Kyle Macey