La propriété CSS object-fit
définit la façon dont le contenu d'un élément remplacé (<img>
ou <video>
par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Selon la valeur utilisée pour object-fit
, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.
Note : Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété object-position
.
Syntaxe
/* Valeurs avec un mot-clé */ object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; /* Valeurs globales */ object-fit: inherit; object-fit: initial; object-fit: unset;
La propriété object-fit
peut être définie grâce à l'un des mots-clés suivants.
Valeurs
contain
- Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
cover
- Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
fill
- Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.
none
- Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.
scale-down
- Le contenu est dimensionné comme si
none
oucontain
étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.
Syntaxe formelle
fill | contain | cover | none | scale-down
Exemples
HTML
<div> <h2>object-fit: fill</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> <h2>object-fit: contain</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> <h2>object-fit: cover</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> <h2>object-fit: none</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> <h2>object-fit: scale-down</h2> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> </div>
CSS
h2 { font-family: 'Courier New', monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Images Module Level 4 La définition de 'object-fit' dans cette spécification. |
Version de travail | Les mots-clés from-image et flip ont été ajoutés. |
CSS Images Module Level 3 La définition de 'object-fit' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | fill |
---|---|
Applicabilité | éléments remplacés |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
object-fit | Chrome Support complet 31 | Edge
Support complet
16
| Firefox Support complet 36 | IE Aucun support Non | Opera
Support complet
19
| Safari Support complet 10 | WebView Android Support complet 4.4.3 | Chrome Android Support complet 31 | Firefox Android Support complet 36 | Opera Android
Support complet
19
| Safari iOS Support complet 10 | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Voir aussi
background-size
- Les autres propriétés CSS liées aux images :