Les CSS backgrounds

Pour les images placées en “Background” via CSS, il est possible de préciser la taille avec deux mots-clés

  • cover : masquage partiel de l’image, pour remplir entièrement le cadre, sans déformation.
  • contain : essaie de remplir le cadre tout en gardant toute l’image visible, en la rapetissant s’il le faut.

Un exemple de code qui applique une image de fond:

.bg {
  background-image: url("https://1904.cc/i/clouds.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

See the Pen CSS Background by Manuel Schmalstieg (@eracom) on CodePen.

La propriété object-fit

La propriété object-fit permet d’appliquer le mode “cover” ou “contain” sur des images ou vidéo dans le HTML (qui ne sont pas chargées par la propriété “background-image”). Une propriété CSS longtemps attendue, qui permet de spécifier comment une image (ou vidéo) doit s’adapter à son conteneur.

Les valeurs possibles sont:

  • fill : déformation de l’image, pour remplir le cadre à tout prix.
  • contain : essaie de remplir le cadre tout en gardant toute l’image visible, en la rapetissant s’il le faut.
  • cover : masquage partiel de l’image, pour remplir entièrement le cadre, sans déformation.
  • scale-down : l’image se rétrécit pour rentrer dans le cadre. Peut se comporter comme contain.
  • none : comportement classique, affichage de l’image à taille réelle des pixels.

Exemples :

Exemple avec une même image, avec le mode cover, contain et fill.

See the Pen object-fit by Manuel Schmalstieg (@eracom) on CodePen.

Explication du object-fit sur Debug TV

Dans l’épisode 4 de Debug TV, Adrien Cater explique les propriétés object-fit et aspect-ratio.