Redimensionner automatiquement les grandes images avec JavaScript?

Question

J'ai une application qui permet aux gens d'afficher des images sur les autres profils avec le code bb. Le problème est, certains affichent de très grandes images, qui couvrent d'autres parties du site quand ils sont consultés.

Comment puis-je une petite échelle des images, côté client, donc ils ne sont pas plus grand que x par y dimensions?

EDIT. Ce sont des images de style de profil myspace .... que les gens publient avec des balises [img]. Ils ne sont pas téléchargés ou stockés sur le site lui-même.

Answer 1

Réduisez-les du côté serveur à la place. Je suppose que vous le stockez de toute façon. Si vous le stockez, la quantité de données transmises du serveur aux clients sera réduite. Si vous stockez les grandes images, beaucoup de données inutiles seront envoyées au client dans chaque requête qui est plus lente.

Si vous voulez vraiment faire sur le côté client, je suppose que CSS redimensionnera pour vous.

EDIT: Essayez ci-dessous, a vu utilisé sur un autre forum, qui fonctionne dans IE et devrait fonctionner dans la plupart des navigateurs: Avec css, réglez le img avoir:

width: 590 px; 

et la div sorrounding il:

max-width: 590 px; 

Answer 2

Il serait préférable de redimensionner les images sur le téléchargement de site Web. De cette façon, vous pouvez appliquer une taille maximale qui sera la plus appropriée pour votre site.

Si vous dépendez rendu de l'image, puis en ajustant sa taille, vous aurez un effet de scintillement que l'image est affichée en taille réelle, puis revus à la baisse plus petite.

Une autre option est de mettre l'image affichée dans un div avec une taille de jeu et overflow: hidden.

Answer 3

CSS:

#post img { 
    max-height: 1000px; 
    max-width: 500px; 
}