Object-fit
La propriété object-fit définit comment le contenu d'un média, par exemple une image ou une vidéo, réagit lorsqu’une largeur et une hauteur (width/height) lui sont attribuées. Ainsi, il est possible de contrôler s'il est préférable que son contenu soit étiré ou rogné.
Pour ce faire, il existe cinq valeurs possibles ✋
nonefill(par défaut)containcoverscale-down
Afin de démontrer le comportement associé à chacune de ces valeurs, la même image et les mêmes dimensions seront utilisées dans les exemples suivants.
fill vs none
À gauche, l'élément avec object-fit: fill; étire le contenu de l'image, sans tenir compte de son ratio initial, afin de couvrir la dimension définie. Cette valeur déforme le contenu du média (Comportement par défaut).
À l’opposé à droite, object-fit: none; ne redimensionne aucunement le contenu de l'image, peu importe la dimension définie. L'image est donc identique à notre image témoin.
contain vs cover
À gauche, object-fit: contain; garde le ratio du contenu de l'image intact et le redimensionne de sorte qu'il soit entièrement visible. 🚫 rognage.
À droite, object-fit: cover; garde aussi le ratio du contenu de l'image intact, mais le redimensionne de sorte que la dimension définie soit entièrement recouverte par celui-ci. Quitte à rogner certaines parties du contenu du média.
cover est utilisé régulièrement pour les héros de site (Blocs en entête de page avec une image ou vidéo en arrière-plan).
scale-down
Redimensionne le contenu du média avec object-fit: none; et object-fit: contain; et retourne le plus petit résultat des deux.
Object-position
Indique comment positionner sur les X et Y le contenu d'un media ayant la propriété object-fit.
Par défaut, le contenu du média est centré object-position: 50% 50%;, comme dans les exemples précédents.
contain
Lorsqu'un média à la propriété object-fit: contain;, l'ensemble du média est visible, il est donc probable qu'une zone vide soit visible si l'espace alloué ne correspond pas exactement à la dimension du média. Dès lors, il est possible via object-position de définir quelle partie de l'espace devrait être couverte par le média.
Par exemple, pour aligner le média à gauche il est possible d'utiliser object-position: 0% 50%; ou encore à droite avec object-position: 100% 50%;.
cover
Dans le cadre d'un media ayant la propriété object-fit: cover;, l'espace allouée est entièrement recouverte par le média. Il est donc probable qu'une partie soit rognée si l'espace alloué ne correspond pas exactement à la dimension du média.
Heureusement, il est possible de sélectionner quelle partie du média doit rester visible. Par exemple, en haut avec object-position: 50% 0%; ou en bas avec object-position: 50% 100%;.