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 ✋

  • none
  • fill (par défaut)
  • contain
  • cover
  • scale-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-fit object-fit 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%;.

object-position object-position
EXERCICE Object-fit - McDonald's Pour cet exercice, vous allez devoir recréer différentes combinaisons de menu déjeuner chez McDonald’s.