Propriété CSS object-fit

❮ Précédent Suivant ❯

La propriété object-fit est utilisée pour spécifier comment un élément doit être redimensionné afin de remplir la boîte qui le contient.

La propriété object-fit permet de faire le contenu de l'image convenir aux dimensions spécifiées dans la feuille de style.

L'élément peut être rogné, mis à l'échelle ou étiré pour qu'il corresponde à la largeur et la hauteur spécifiée à l'aide des valeurs de la propriété. Il y a cinq valeurs:

fill
contain
cover
none
scale-down

Valeur initiale	fill
Appliquée à	Éléments remplacés.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.objectFit = "cover";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-fit</h2>
    <h3>Image originelle:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Fill value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Essayez-vous-même!

Voici un exemple avec la valeur "cover" qui coupe les bords de l'image, préserve le ratio d'affichage, et remplit l'espace:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-fit</h2>
    <h3>Image originelle:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Cover value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Essayez-vous-même!

Un exemple avec la valeur "contain":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-fit </h2>
    <h3>Image originelle:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Contain value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Essayez-vous-même!

Exemple avec la valeur "scale-down" qui définit l'image de plus petite taille:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-fit</h2>
    <h3>Image originelle:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Scale-down value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
fill	Le contenu est dimensionné pour remplir la boîte de contenu. C'est la valeur initiale de cette propriété.
contain	Le ratio d'affichage du contenu est mis à l'échelle autant que possible pendant qu'il reste contenu dans les bords de l'éléments.
cover	Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu.
none	Aucun contenu redimensionné.
scale-down	Le même que les valeurs contain et none. La taille du contenu de l'élément sera plus petit.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.