[Résolu] Dimensionnement d'image

Bonjour à tous

J'ai dû utiliser un script JS pour réaliser une chose très simple qui doit être faisable par CSS, mais je ne sais pas comment.
Il s'agit de faire en sorte qu'une image se dimensionne de telle façon qu'elle soit "au mieux" dans son conteneur, c'est à dire qu'elle ait au plus la largeur du contenant ou la hauteur du contenant tout en conservant la proportion hauteur/largeur.
Si on écrit:

img{ max-width:100%;max-height:100%;}

l'image se déforme pour épouser la taille du contenant, ce qui n'est pas ce que je désire faire.
Avez vous une solution à ce problème?
Merci de votre aide
Modifié par PapyJP (12 Mar 2017 - 12:37)

Il faut, il me semble, enlever une des deux valeur. Si on souhaite un ajustement sur la largeur, en ne précisant que celle-ci, la hauteur sera proportionnelle par rapport à ses dimensions originelles.

Je crois aussi qu'il faille enlever le préfixe max-.

Bonjour.

Il y a une solution mais elle ne va pas vous plaire... car elle ne fonctionne pas avec tous les navigateurs :

img
	{
	width : 100%;
	height : 100%;
	object-fit : contain;
	}

On peut aussi faire quelque chose avec flex mais c'est assez compliqué...

Merci de vos réponses.

Vous confirmez qu'il n'y a pas de solution CSS et que le mieux est de conserver mon code JS.

Le CSS ne sait pas vraiment quoi faire avec les images, qui ont leurs propres dimensions définies dans le fichier image. Il n'y a pas de directive CSS permettant de les prendre en compte, sauf "max-width" et "max-height" qui signifient que la largeur ou la hauteur natives sont à prendre en compte sauf si elles excèdent les valeur données. Si on en utilise une seule, le résultat conserve la proportion. Si on utilise les deux, il traite indépendamment la largeur et la hauteur.

J'espérais qu'il y avait une directive que je ne connaissais pas pour dire "largeur OU hauteur", mais manifestement ce n'est pas le cas.

Ce le sera peut être possible dans le futur, mais compte tenu de mon âge et de mon état de santé, je ne serai plus là pour le voir!!!