28173 sujets

CSS et mise en forme, CSS3

Redimension d'image en conservant les proportions

Salut,

J'ai une liste de produits dont les images sont de taille variable (200x300, 150x50, etc) et j'aimerais les afficher chacune dans une zone maximale (100x100), en respectant leur proportion.

J'ai essayé de les mettre dans un conteneur mais les proportions ne sont pas conservées.

#img_cont {
	height:100px;
	width:100px;
}
#img_cont img {
	height: 100%;
	width: 100%;
	}


Merci d'avance pour le coup de main.
Bonjour,
C'est normal puisque tes images n'ont pas une hauteur et largeur identique.
Peut-être essayer avec max-width et max-height: 
#img_cont img {
	max-height: 100%;
	max-width: 100%;
	}


Ou sinon il faut que tu ailles dans le salon javascript voire PHP, asp...
pour trouver une fonction qui récupère la taille de ton image
et qui redéfinissent la valeur de taille la plus importante à 100px ou 100%
et qui calcul l'autre valeur de façon homothétique.
Bonjour,

Il n'y a aucun problème technique sur le fond avec ce redimensionnement. Il s'agit sans doute d'un problème de syntaxe (a priori, par exemple, il s'agirait d'une classe et non d'un id)

En revanche, du point qualitatif, il est recommandé d'utiliser des véritables vignettes, et non des images redimensionnées côté client (voir pratiques qualité Web Opquast).
Modifié par Laurent Denis (25 Feb 2007 - 14:43)
Merci à tous les 2,

Laurent -> j'aurais bien joué avec la librairie php GD (pour les vignettes) mais le "défis" impose de ne pas toucher à la source (que du css)

Hermann -> j'ai simplement appliqué cette class sur img :
.img_list {
	max-height:100px;
	max-width:100px;
	}


Le rendu semble satisfaisant même si j'ai l'impression que certaines images sont déformées...
Forcer le redimensionnement des images par le navigateur n'est pas la bonne solution à adopter ...

Cela n'a que des désavantages Smiley decu :

- en général, l'image est dégradée

- le fait de charger d'abord l'image en grand pour en faire une miniature ensuite fait que le chargement des images est plus long. Et donc le chargement de la page aussi.

- de la même remarque que précédemment, cela peut alourdir le trafic du site pour rien : si le visiteur ne clique pas sur l'image pour l'agrandir, on a chargé la grande image pour rien. A moins bien sur d'avoir un hébergement à trafic illimité ...

Enfin bref, c'est une solution à éviter. Il faut passer par les miniatures Smiley cligne
Patate a écrit :

Le rendu semble satisfaisant même si j'ai l'impression que certaines images sont déformées...


Il est inutile de passer par max-... Mais bon, pourquoi pas ? Smiley lol

En revanche, une image de 200x300 redimensionnée à 100x100 sera effectivement déformée Smiley cligne

Pour l'éviter, ne spécifier qu'une des deux valeurs width ou height si les images n'ont pas toutes les mêmes proportions.
Sujet clos
Aller à