Comment redimensionner automatiquement des images dans une application Web?

Question

J'ai construit une application web qui permet aux gens de télécharger une image, et cette image sera affichée sur la liste des applications web. J'ai besoin d'avoir l'image automatiquement redimensionnée à quelque chose de plus approprié comme une vignette.

Answer 1

Vous voulez mettre la balise image dans un autre élément, comme {} tag_image

vous pouvez ensuite définir '.image img {max-width: 100%} dans votre feuille de style pour l'image ne dépassez jamais la largeur de son conteneur et définissez une largeur sur l'image div pour décider de la taille de ce conteneur.

Answer 2

Je sais que c'est un vieux message mais je veux juste aider ceux qui n'ont encore aucune idée. Dans le champ de votre application Web qui a un type 'image', ajoutez simplement la largeur et la hauteur au chemin de l'image.

Comme ceci: /path/to/my/image.jpg,370,170

Source: http://iamtheshadowonthesun.blogspot.com/2013/09/adobe-business-catalyst-how-to-specify.html

Answer 3

Catalyst Adobe Business interpréter certains paramètres sur l'URL src d'une balise img comme une instruction pour redimensionner l'image avant de l'envoyer au client. Ces paramètres sont les suivants:

• Action=thumbnail
• Width (entier)
• Height (entier)
• algorithm (proportional | fill | fill_proportional | proportional_noupscale)
  • proportional conserver les proportions, et la volonté des -plus petites images. C'est la valeur par défaut.
  • fill écrase les images pour qu'elles s'adaptent et agrandit les plus petites images. Réduit les images par le moins nécessaire pour obtenir un seul axe à l'intérieur des dimensions données; les pixels supplémentaires sur l'autre axe sont recadrés symétriquement. Il n'agrandit pas les petites images.
  • proportional_noupscale renvoie toujours une image dans le même rapport d'aspect que l'original, insère le remplissage plutôt que la mise à l'échelle et s'adapte toujours parfaitement aux dimensions spécifiées - un rembourrage supplémentaire est rogné pour conserver le rapport d'aspect.
• Format (png | jpg | gif)
  • Ce paramètre détermine le type d'image retournée après re-mise à l'échelle.

Exemple: <img src="{tag_yourImageFieldName_value}?Action=thumbnail&Width=320&Height=100&algorithm=fill">

Ce insérera l'image du champ yourImageFieldName dans l'application Web, et de squash pour l'adapter à 320 pixels de large par 100 de haut. L'ajout de _value à l'étiquette force BC à renvoyer uniquement l'URL, sans aucun balisage supplémentaire.

Référence: Programmatically creating thumbnails from full size images

Answer 4

j'ai réussi à le faire en utilisant un petit Javascript et JQuery

$('.div img').attr('src', function() { 
    return this.src + '?Action=thumbnail&Width=675&Height=503'; 
});//resizing images 

Hope this helps .. as fait pour moi!