Propriété object-fit de CSS

Définition et utilisation

L'attribut objectFit est utilisé pour définir la manière dont la taille de <img> ou <video> doit être ajustée pour s'adapter à son conteneur.

Cette propriété indique comment le contenu remplit le conteneur. Par exemple, "conserver le ratio d'aspect" ou "étendre et occuper le plus d'espace possible".

Voir également :

Tutoriel CSS :CSS object-fit

Manuel de référence CSS :CSS object-position

Manuel de référence HTML DOM :Propriété objectFit

Exemple

Coupe les bords de l'image, conserve le ratio d'aspect, puis remplit l'espace :

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Essayez-le vous-même

Syntaxe CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Valeur de l'attribut

Valeur Description
fill Valeur par défaut. Redimensionne le contenu de remplacement pour qu'il remplisse tout le cadre de contenu de l'élément. Si nécessaire, l'objet sera étiré ou comprimé.
contain Redimensionne le contenu de remplacement pour conserver son ratio d'aspect tout en s'adaptant au cadre de contenu de l'élément.
cover Redimensionne le contenu de remplacement pour qu'il occupe tout le cadre de contenu de l'élément tout en conservant son ratio d'aspect. L'objet sera découpé.
none Le contenu de remplacement ne sera pas redimensionné.
scale-down La taille du contenu est la même que none ou contain, selon celui qui obtient la taille de l'objet plus petite entre eux.
initial Récupère cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : Voir les propriétés individuelles.
Héritage : Non
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.objectFit="cover"

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0