2009-10-20 8 views
2

Est-il possible de réduire la taille d'une image en html tout en gardant des proportions?génère une "vignette" en html tout en gardant des proportions

Je sais que je peux utiliser l'attribut height et width de la balise img, mais je ne connais pas la taille de l'image. Veuillez ne pas me dire de connaître la taille de l'image sur le serveur, ou que la bonne façon de le faire est de générer des vignettes côté serveur, ce qui économise de la bande passante et améliore le temps de chargement de la page. Je connais la solution idéale. Mais je veux rapide et sale ...

+1

Pourquoi préférez-vous une solution rapide et sale? – rahul

+3

@phoenix, contraintes de temps - avez-vous déjà eu affaire à eux? ou avez-vous toujours le temps d'expédier la meilleure solution possible. – flybywire

Répondre

6

rapide et sale: il suffit de définir l'un des attributs dans la balise img:

<img src="my.jpg" width="200" /> or <img src="my.jpg" height="200" /> 
4

Oui. Il suffit d'utiliser la hauteur ou largeur. Mais rapide et sale est very dirty.

+0

Le lien prouvait que la qualité du redimensionnement du navigateur est très dépendante du navigateur: je l'ai essayé dans Chrome, IE et Firefox. Dans IE et Firefox, il était évident qu'il utilisait le filtre "rapide", mais il était légèrement meilleur que l'image "rapide" pré-traitée. Dans Chrome, il s'agissait en fait d'une très bonne qualité sur l'image redimensionnée par le navigateur. C'était en fait mieux que l'image pré-traitée de haute qualité! – awe

+0

Je vous ai donné +1 parce que vous avez raison dans la solution (utilisez la hauteur ** ou la largeur **), et que c'est TRÈS sale en utilisant plus de bande passante que nécessaire. – awe

0

Rappelez-vous également que vous pouvez donner un pourcentage de la largeur initiale/hauteur en tant que valeur ainsi, par exemple:

<img src="my.jpg" width="50%" /> 
+0

Cela ne fonctionnera pas dans la plupart des cas - il suffit de définir la largeur de l'image à 50% de la largeur de l'élément englobant. –

Questions connexes