Archive pour octobre 2016

Image full-screen et responsive avec flexbox

vendredi 21 octobre 2016

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 !