Propriété CSS object-fit

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>

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>

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>

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>

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.

Support de Navigateurs

31.0+ 16.0 partial 36.0+ 10.0+ 19.0+
11.5-12.1 -o-


Trouvez-vous cela utile?

Articles Associées