Attribut CSS object-fit

CSS object-fit Cette propriété est utilisée pour définir comment ajuster la taille de <img> ou <video> pour qu'elle s'adapte à son conteneur.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette propriété.

Attribut Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

Attribut CSS object-fit

CSS object-fit Cette propriété est utilisée pour spécifier comment ajuster la taille de <img> ou <video> pour qu'elle s'adapte à son conteneur.

Cette propriété indique comment le contenu doit être rempli dans le conteneur de différentes manières. Par exemple, "conserver le ratio d'aspect" ou "étendre et occuper le plus d'espace possible".

Regardez l'image de tulipes de la Porte de Shanghai, qui est de 300x300 pixels :

Tulip

Mais, si nous mettons l'image au-dessus en 200x300 pixels, elle aura l'air ainsi :

Tulip

Exemple

img {
  width: 200px;
  height: 300px;
}

Essayer par vous-même

Nous voyons que l'image est compressée pour s'adapter au conteneur de 200x300 pixels et que le ratio d'aspect original est détruit.

Si nous utilisons object-fit: cover;Cela coupera les côtés de l'image, conservera le ratio d'aspect et remplira l'espace, comme suit :

Coffee

Exemple

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

Essayer par vous-même

Un autre exemple

Ici, nous avons deux images, nous souhaitons qu'elles remplissent 50% de la largeur et 100% de la hauteur de la fenêtre du navigateur.

Dans l'exemple suivant, nous ne n'utilisons pas object-fitPar conséquent, lorsque nous ajustons la taille de la fenêtre du navigateur, le ratio d'aspect de l'image sera détruit :

Exemple

Essayer par vous-même

Dans l'exemple suivant, nous utilisons object-fit: cover;Par conséquent, lorsque nous ajustons la taille de la fenêtre du navigateur, nous conservons le ratio d'aspect de l'image :

Exemple

Essayer par vous-même

Toutes les valeurs de l'attribut CSS object-fit

object-fit L'attribut peut accepter les valeurs suivantes :

  • fill - Valeur par défaut. Ajustez la taille du contenu de remplacement pour remplir le cadre de contenu de l'élément. Si nécessaire, étirez ou comprimez l'objet pour相适应 à cet objet.
  • contain - Ajustez le contenu de remplacement après mise à l'échelle pour maintenir le ratio d'aspect, tout en le plaçant dans le cadre de contenu de l'élément.
  • cover - Ajustez la taille du contenu de remplacement pour maintenir le ratio d'aspect tout en remplissant tout le cadre de contenu de l'élément. L'objet sera découpé pour s'adapter.
  • none - Ne pas ajuster la taille du contenu de remplacement.
  • scale-down - Ajustement de la taille du contenu comme s'il n'y avait pas de contenu ou de contenu inclus (ce qui entraînera une taille spécifique de l'objet plus petite)

Les exemples suivants montrent object-fit Toutes les valeurs possibles de l'attribut :

Exemple

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

Essayer par vous-même