object-fit CSS propriété

Définition de la CSS object-fit.

La propriété d'ajustement de taille CSS object-fit permet de spécifier la manière s'ajuste la taille d'un élément dit remplacé à l'intérieur de sa boite dont les dimensions sont définies par les propriétés Css et .

Exemple de syntaxe CSS object-fit :
object-fit : none;
object-fit : fill;
object-fit : cover;
object-fit : contain;
object-fit : scale-down;

La propriété de feuille de style object-fit CSS peut prendre la valeur d'ajustement de taille :

  • none : aucun ajustement de la taille.
  • fill : l'élément est étiré pour remplir toutes la zone de contenu de son conteneur, l'élément ne garde pas son rapport hauteur / largeur. Valeur par défaut.
  • cover : l'élément est dimensionné pour remplir toute la zone de contenu de son conteneur tout en gardant son rapport hauteur /largeur. Si l'élément est plus grand que la zone de contenu, il est rogné *.
  • contain : l'élément est dimensionné pour être contenu dans la zone de contenu de son conteneur tout en gardant son rapport hauteur /largeur.
  • scale-down : l'élément est dimensionné comme si none ou contain étaient spécifiés, la dimension la plus petite est appliquée.
  • inherit : hérite de la propriété CSS object-fit de son parent.

Conditions d'application de la CSS object-fit.

La propriété CSS object-fit est applicable sur l'ensemble des balises HTML ou XHTML dites remplacées.

Héritage des valeurs Css de object-fit.

Les balises filles HTML ou XHTML n'héritent pas de la propriété Css object-fit.

Problème d'interprétation de object-fit en Css.

La propriété de feuille de style object-fit CSS ne pose aucun problème d'interprétation, hormis pour Edge qui n'accepte que comme élément remplacé (02-2020).

Règles de syntaxes CSS pour object-fit.

Les éléments remplacés

Les éléments dit remplacés sont :

  • img,
  • video,
  • iframe,
  • embed,
  • object,
  • input type="image".

L'utilisation de la propriété Css avec comme valeur url()

Contrainte de taille

Un élément remplacés contraint quand :

  • on ne précise pas sa taille, c'est donc sa taille par défaut qui est appliquée.
  • on spécifie un width ou un height avec une valeur fixe (px,em, vh, ...)
    Seules les valeurs en % sont considéré comme non contraignantes.

Si l'élément remplacé a une de ses deux taille contrainte, alors l'ajustement se fait sur l'autre taille.

Si élément remplacé a ses deux tailles non contraintes et que l'élément dépasse de la zone de contenu alors il est rogné.
Mais l'élément remplacé a une de ses deux tailles contrainte et que l'élément dépasse de la zone de contenu alors il n'est pas rogné.

Compatibilités navigateurs de la propriété object-fit

Détails des versions de la CSS object-fit
Résumé du support navigateurs de la CSS object-fit

Propriétés CSS préfixées de object-fit

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété object-fit CSS :

Pour rendre compatible la propriété object-fit CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

Versions préfixées de object-fit :
-o-object-fit : cover;
object-fit : cover;
 : hidden;

Votre avis sur la définition object-fit en CSS

Votez pour la définition CSS object-fit

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/object-fit-css.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.