Object-fit

3

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é et/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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Pour en savoir plus, voir cet article MDN sur 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.

Il est néanmoins possible d'aligner le contenu du média à gauche avec object-position: 0% 50%; ou à droite avec object-position: 100% 50%;.

Voir le CodePen de Simon Arnold (@smnarnold).

Dans le cadre d'un media ayant la propriété object-fit: contain; ceci déplace le contenu de notre image horizontalement ↔️ dans la zone définie.

Ou encore, d'aligner le contenu du média en haut avec object-position: 50% 0%; ou en bas avec object-position: 50% 100%;.

Voir le CodePen de Simon Arnold (@smnarnold).

Dans le cadre d'un media ayant la propriété object-fit: cover; ceci indique quelle partie devrait garder le focus et donc éviter d'être rognée.

Exercice McDo 🍔

Pour en savoir, voir cet article MDN sur object-position.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme