HervéRenault.fr

Logo de CSS3

CSS object-fit et object-position

C'est comme background-size (et background-position) mais pour une simple <img> (ou une vidéo)

Le problème

Si j'ai un lot d'images, certaines carrées et d'autres rectangulaires, et si je veux les afficher toutes au carré, ça va en déformer comme ceci :

une image carrée une image rectangulaire

La vieille solution

Je peux créer un conteneur et y mettre les images avec width: 100% et height: auto mais c'est plus long et je dois éventuellement résoudre les problèmes d'alignement comme ceci :

une image carrée dans un conteneur carré une image rectangulaire dans un conteneur carré

La solution moderne

Depuis 2016, je peux simplement les afficher au carré et ajouter object-fit: contain

une image carrée une image rectangulaire

Il existe d'autres valeurs de object-fit, cf MDN.

Et la position

Il y a aussi une règle CSS object-position qui peut être pratique pour décaler l'image tout en conservant son propre espace "naturel" dans la mise en page :

une image carrée une image rectangulaire

(page à regarder dans l'inspecteur des outils de développement)