Attribut objectFit du style

Définition et utilisation

objectFit Cette propriété est utilisée pour définir la manière dont la taille de <img> ou <video> doit être ajustée pour s'adapter à son conteneur.

Cette propriété indique comment le contenu doit être rempli dans le conteneur de plusieurs manières ; par exemple, "conserver les proportions d'aspect" ou "étirer et occuper le plus d'espace possible".

Voir également :

Tutoriel CSS :CSS object-fit

Manuel de référence CSS :L'attribut object-fit

Exemple

Coupez les côtés de l'image, conservez les proportions d'aspect et remplissez l'espace :

document.getElementById("myImg").style.objectFit = "cover";

Essayez-le vous-même

Syntaxe

Retourner l'attribut objectFit :

object.style.objectFit

Définir l'attribut objectFit :

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Valeur de l'attribut

Valeur Description
fill Par défaut. Redimensionne le contenu de remplacement pour le remplir de la boîte de contenu de l'élément. Si nécessaire, l'objet sera étiré ou comprimé.
contain Redimensionne le contenu de remplacement pour maintenir ses proportions d'aspect tout en le rendant adaptatif à la boîte de contenu de l'élément.
cover Redimensionne le contenu de remplacement pour maintenir ses proportions d'aspect tout en le rendant adaptatif à la boîte de contenu de l'élément. L'objet sera découpé.
none Le contenu de remplacement ne sera pas redimensionné.
scale-down La taille du contenu est la même que none ou contain, selon celui qui obtient la taille de l'objet plus petite entre eux.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : fill
Valeur de retour : Une chaîne de caractères, représentant la taille de l'élément L'attribut object-fit.
Version de CSS : CSS3

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0