Images responsive, flexbox et souci de ratio d'affichage

Astuce par (Designer Web & Mobile spécialisée en UI and UX design, Partout dans le monde :))
Créé le , mis à jour le (16067 lectures)
Tags : bugs, responsive, flexbox

Sur plusieurs navigateurs (sauf Firefox) nous avons constaté au sein de différents projets à l'agence un petit bug concernant le module CSS3 Flexbox.

Le constat est celui-ci : lorsque l'on place une image responsive directement dans un container en flexbox, l'image s'affiche avec un petit souci de proportions : 

bug Chrome et flexbox

Pour en savoir un peu plus sur l'explication de ce comportement (qui n'est en fait pas un bug) je vous laisse lire cet article.

En résumé, la spécification Flexbox a changé il y a quelques temps et les flex-items bénéficient désormais d'un min-height / min-width de valeur auto (et non plus 0 comme avant), et ça change tout !

En effet, quand la valeur de min-height était 0, les éléments flex-items pouvaient (devaient) se réduire autant que nécessaire, notre image préservait donc son ratio en réduisant leur hauteur.
À présent la taille intrinsèque des éléments tels que <img>.ou <input> est préservée par défaut. Dans notre exemple ci-dessus, la hauteur de l'image (en raison de son min-height: auto) n'a plus le droit de se réduire en deça de sa hauteur intrinsèque et le ratio ne peut donc pas être conservé.

Pour corriger cela, plusieurs solutions sont mises en pratique dans la démo ci-dessous :

  • ajouter n'importe quel container, par exemple <div>, autour de l'image. En résumé, faire en sorte que <img> ne soit pas descendant direct d'un élément en display:flex
  • ajouter un overflow:hidden sur le flex-item (ici l'image)
  • forcer un min-height:0 et min-width:0 sur le flex-item (ici l'image) pour écraser la valeur auto qui vient nous embêter.

De notre courte expérience sur ce sujet,  Il nous semble être une bonne pratique générale de systématiquement appliquer un min-height: 0 et min-width: 0 sur chaque flex-item de vos pages.

See the Pen oxXzwv by Stéphanie Walter (@stephaniewalter) on CodePen.

Commentaires

escarmouche a dit le

Eh bien merci ! Je me suis pris la tête des heures avec ce problème il y a quelques jours !

Olivier C a dit le

J'avais moi aussi constaté un bug pour une image dans une lightbox positionnée en flex. Le ratio de l'image était conforme, jusqu'au changement d'orientation du terminal (portrait à landscape ou inversement). J'avais résolu le problème en plaçant moi aussi l'image dans une div, et c'est cette div qui récupère le comportement flex :

https://scriptura.github.io/Pages/Images.html

Cerebral a dit le

Pour info, le problème ne se produit pas, non plus, sur Edge.

Chrigooo a dit le

Pour info, seule la 2ème image (avec DIV) fonctionne sous IExplorer 11.

Raphael a dit le

@Chrigooo : Oui, c'est à cause de l'usage du width: 100%; dans ce code. Il n'est utile que dans notre exemple pour forcer l'image à s'agrandir pour s'adapter à son parent.
Dans un cas concret, il ne sera pas utile et ne devrait pas être présent.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil