Discussion :

[markham]

Bonjour,

j'ai une image dans une popup, qui se limite a une simple balise <img>

le soucis c'est a cause de l'utilisation de cette balise, l'image ne se redimensionne pas comme il faudrais lors qu'on joue avec la largeur et/ou la hauteur de la popup
l'image est tronqué au lieu de systématique s'adapter la fenêtre comme le fait une image directement lu avec un navigateur moderne :

resultat voulu

le pb c'est que je ne sais pas si c'est un pb resolvable en javascript ou est ce que le css suffirais !

merci

[SylvainPV]

Bonjour,

Si l'image est plus grande que le conteneur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
img {
   max-width: 100%;
   max-height: 100%;
}

Si elle est plus petite, elle ne s'agrandira pas, et si on rajoute width: 100% ou height:100% le ratio largeur/hauteur ne sera plus préservé.

La solution standard CSS3 est :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img {
   object-fit: contain;
}

Spec: http://www.w3.org/TR/css3-images/#sizing
‘contain’ - The replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
‘cover’ - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.

Mais le support laisse à désirer : http://caniuse.com/object-fit
Toutefois un polyfill est dispo ici : https://github.com/anselmh/object-fit