object-fit

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

La propriété CSS object-fit définit la façon dont le contenu d'un élément remplacé, tel qu'une <img> ou une <video>, doit être redimensionné pour s'adapter à son conteneur.

Note : La propriété object-fit n'a aucun effet sur les éléments HTML <iframe>, <embed> et <fencedframe>.

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.

Exemple interactif

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

Syntaxe

css

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* Valeurs globales */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
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 redimensionné pour maintenir son rapport d'aspect tout en s'adaptant à la boîte de contenu de l'élément. L'ensemble de l'objet est ajusté pour remplir la boîte, tout en préservant son ratio d'aspect, de sorte que l'objet sera « au format de lettre » ou « au format de pilier » ^(angl.) si son ratio d'aspect ne correspond pas à celui de la boîte.
cover: Le contenu remplacé est redimensionné pour maintenir son rapport d'aspect tout en remplissant entièrement la boîte de contenu de l'élément. Si le rapport d'aspect de l'objet ne correspond pas à celui de sa boîte, l'objet sera alors rogné pour s'adapter.
fill: Le contenu remplacé est redimensionné pour remplir entièrement la boîte de contenu de l'élément de boîte. L'ensemble de l'objet remplira complètement la boîte. Si le rapport d'aspect de l'objet ne correspond pas à celui de sa boîte, l'objet sera alors étiré pour s'adapter.
none: Le contenu remplacé n'est pas redimensionné.
scale-down: Le contenu est redimensionné comme si none ou contain était défini, selon ce qui donnerait la taille d'objet concrète la plus petite.

Définition formelle

Valeur initiale	`fill`
Applicabilité	éléments remplacés
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

object-fit = 
  fill                               |
  none                               |
  [ contain | cover ] || scale-down

Exemples

Appliquer `object-fit` à une image

HTML

html

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <img class="fill narrow" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <img class="contain narrow" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <img class="cover narrow" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <img class="none narrow" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn_logo_only_color.png" alt="Logo MDN" />

  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="Logo MDN" />
</section>

CSS

css

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

img {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.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
CSS Images Module Level 3 # the-object-fit

Compatibilité des navigateurs

Voir aussi

Les autres propriétés CSS associées aux images : object-position, image-orientation, image-rendering, image-resolution.
La propriété background-size
Comprendre les rapports d'aspect

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 20 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu