La propriété CSS object-fit définit la façon dont le contenu d'un élément remplacé doit s'adapter à son parent en utilisant sa largeur et sa hauteur.

Selon la valeur utilisée pour object-fit, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.

Note : Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété object-position.

Syntaxe

/* Valeurs avec un mot-clé */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* Valeurs globales */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

La propriété object-fit peut être définie grâce à l'un des mots-clés suivants.

Valeurs

contain
Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
cover
Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
fill
Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.
none
Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.
scale-down
Le contenu est dimensionné comme si none ou contain étaient spécifiés, on prend celui qui aboutirait à une taille rélle plus petite.

Syntaxe formelle

fill | contain | cover | none | scale-down

Exemples

HTML

<div>
  <h2>object-fit: fill</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>

</div>

CSS

h2 {
  font-family: 'Courier New', monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'object-fit' dans cette spécification.
Version de travail Les mots-clés from-image et flip ont été ajoutés.
CSS Images Module Level 3
La définition de 'object-fit' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialefill
Applicabilitééléments remplacés
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 31Edge Support complet 16
Notes
Support complet 16
Notes
Notes Edge supports object-fit on img elements only. See Edge issue 13603873 for details.
Firefox Support complet 36IE Aucun support NonOpera Support complet 19
Support complet 19
Support complet 11.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet OuiWebView Android Support complet 4.4.3Chrome Android Support complet 31Edge Mobile ? Firefox Android Support complet 36Opera Android Support complet 24
Support complet 24
Support complet 11.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, PifyZ
Dernière mise à jour par : SphinxKnight,