Propriété CSS object-fit
Exemple
Coupez les côtés d'une image, en préservant les proportions, et remplissez l'espace :
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Définition et utilisation
La object-fit
propriété est utilisée pour spécifier comment un <img> ou <video> doit être redimensionné pour s'adapter à son conteneur.
Cette propriété indique au contenu de remplir le conteneur de différentes manières ; comme "préserver ce rapport d'aspect" ou "étirer et prendre autant d'espace que possible".
Valeur par défaut: | voir les propriétés individuelles |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.objectFit="couverture" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Syntaxe CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Valeurs de propriété
Value | Description | Try it |
---|---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit | |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box | |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit | |
none | The replaced content is not resized | |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : ajustement d'objet CSS
Référence CSS : CSS object-position
Référence HTML DOM : la propriété objectFit