Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

object-fit - Propriété CSS

object-fit

Résumé des caractéristiques de la propriété object-fit

Description rapide
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
fill | contain | cover | scale-down | none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
fill
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété object-fit passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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 fill contain contain cover cover none none scale-down scale-down
;
  • 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: 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: 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: 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: 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: initial; object-fit: inherit; object-fit: revert; object-fit: revert-layer; object-fit: unset;

    La valeur initiale est : fill.

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 d'animation avec la propriété object-fit

Simulateur.

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.

object-fit :
Exemple pour object-fit (CSS)

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

1
object-fit
Estimation de la prise en charge en pourcentage du parc actuel.
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que object-fit.

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

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Position d'une image ou d'une vidéo par rapport à son container.

Fonctions.

Définit un dégradé de couleurs conique.
Réalise le mélange de plusieurs images.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur linéaire.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur linéaire avec répétition.
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.