Récemment j’ai dû mettre en place une « lightbox » pour afficher une image en full-screen et responsive. Il est assez facile avec Flexbox de centrer horizontalement et verticalement un élément. Il est également assez simple de rendre cette image responsive lorsque celle-ci « déborde » en largeur. Mais réduire l’image lorsque celle-ci est plus grande que la hauteur de l’écran tout en conservant son ratio s’est révélé un peu plus compliqué que ce que je pensais.
A la base l’idée était d’avoir un flex-container avec une hauteur et largeur de 100%, d’avoir un flex-item avec un max-width: 100% et un max-height: 100% histoire de ne pas avoir de débordement et de placer l’image dans le flex-item. Or le max-height sur le flex-item ne fonctionne pas sous Chrome…
Finalement après recherches (notamment dans l’excellent livre de Raphaël Goetter sur le sujet) j’ai pu trouver une solution très simple :
Le code HTML :
1 2 3 | <div class="container-center-v-img"> <img src="test.jpg" /> </div> |
Le code CSS :
1 2 3 4 5 6 7 8 9 10 11 12 | .container-center-v-img { display: flex; height: 100%; } .container-center-v-img > img { max-height: 100%; max-width: 100%; margin: auto; object-fit: contain; } |
C’est tout !
