Object-fit - Propriété CSS

Description de la propriété object-fit.

object-fit définit comment doit être coupé ou redimensionné un élément par rapport aux dimensions qui lui sont imposées. Cette propriété s'applique aux images ou aux vidéos. Elle permet d'éviter les déformations qui se produisent lorsque le ratio entre la largeur et la hauteur imposées est différent du ratio de l'image ou de la vidéo original.

Pour que la propriété object-fit soit opérationnelle, il faut lui imposer des dimensions différentes de ses dimensions natives.

Valeurs pour object-fit.

• object-fit: fill;

  L'image ou la vidéo est dimensionnée en fonction de la largeur et de la hauteur définie, même si cela provoque une distorsion (ratio largeur/hauteur différent de celui de l'image originale).

  
  object-fit:fill;
width:200px; height:100px;
• object-fit: contain;

  L'image ou la vidéo est rétrécie ou agrandie pour qu'elle soit entièrement visible tout en conservant son ratio, donc sans provoquer de distorsion. Si le ratio largeur/hauteur est différent de celui de l'image originale, des marges seront visibles.

  
  object-fit:contain;
width:200px; height:100px;
• object-fit: cover;

  L'image ou la vidéo est dimensionnée pour emplir la place imposée, sans changement de ses proportions. Si le ratio largeur/hauteur est différent de celui de l'image originale, des parties seront coupées.

  
  object-fit:cover;
width:200px; height:100px;
• object-fit: none;

  L'image ou la vidéo est affichée dans ses dimensions originales, sans distorsion. L'image ou la vidéo peut être coupée ou ne pas emplir entièrement l'espace disponible.

  
  object-fit:none;
width:200px; height:100px;
• object-fit: scale-down;

  L'image ou la vidéo est rétrécie (si nécessaire) pour la faire tenir en entier dans l'espace disponible, sans la déformer. Si le ratio largeur/hauteur et différent de celui de l'image originale, des marges seront visibles.

  La différence avec contain est que scale-down ne peut que réduire l'image ou la vidéo alors que contain peut aussi l'agrandir si c'est nécessaire.

  
  object-fit:scale-down;
width:200px; height:100px;

Valeurs communes à toutes les propriétés :

Animation de la propriété object-fit.

L'image ci-dessous a été dimensionnée à 300 pixels de large et 150 pixels de haut, soit un ratio de 2, qui ne correspond pas à son ratio original. L'animation de object-fit fait défiler les valeurs fill, contain et cover.

Exemple interactif avec la propriété object-fit.

Ce simulateur vous permet de visualiser l'effet de la propriété object-fit. On a imposé à cette image une largeur de 400 pixels et une hauteur de 100 pixels, soit un ratio de 4. Ce qui est très loin du ratio original de l'image : elle mesure 300 pixels x 150 pixels, soit un ratio de 2. Ces dimensions imposées sont visualisées par la bordure gris clair. Observez comment la valeur donnée à object-fit adapte les dimensions de l'image en la déformant ou non.

Prise en charge par les navigateurs (compatibilité).

On observe une bonne compatibilité de tous les navigateurs pour ce qui est du traitement de object-fit, sauf pour Internet Explorer, mais c'est un navigateur assez ancien, qui est maintenant peu utilisé.

Remarques :

(1) Avec le préfixe du navigateur -o-.

1

Propriété
object-fit

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

1

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété object-fit.

• Module CSS - Image niveau 3

  Première présentation de la propriété object-fit.
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

• Module CSS - Images et contenu remplacé

  Pas de changement en ce qui concerne object-fit.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi, au sujet des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété object-fit fait partie du module CSS Images Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :