OUJOOD.COM
La propriété object-fit de CSS : le guide complet pour un contrôle parfait des images
object-fit est une propriété CSS qui permet de contrôler le redimensionnement et le positionnement des images dans un conteneur. Cette propriété est très utile pour s'assurer que les images s'adaptent parfaitement à leur conteneur, quels que soient leur taille et leur ratio.
Définition et utilisation
La syntaxe générale de la propriété object-fit est la suivante :
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Voici les valeurs possibles pour la propriété :
- fill : l'image remplit entièrement le conteneur, en étirant ou en écrasant son ratio.
- contain : l'image s'adapte au conteneur en conservant son ratio, sans dépasser les limites du conteneur.
- cover : l'image s'adapte au conteneur en conservant son ratio, en recouvrant le conteneur si nécessaire.
- scale-down : l'image s'adapte au conteneur en conservant son ratio, en réduisant sa taille si nécessaire.
- none : l'image conserve sa taille et son ratio d'origine, dépassant éventuellement les limites du conteneur.
- initial : la valeur par défaut, qui est none.
- inherit : la propriété hérite de la valeur de son parent.
Exemples et conseils d'utilisation
Voici quelques exemples pour illustrer l'utilisation de la propriété object-fit :
- Pour remplir un conteneur avec une image, en étirant ou en écrasant son ratio :
img {
object-fit: fill;
}
img {
object-fit: contain;
}
img {
object-fit: cover;
}
img {
object-fit: scale-down;
}
En utilisant object-fit, vous pouvez contrôler de manière précise le positionnement des images dans leur conteneur. Par exemple, vous pouvez combiner object-fit avec les propriétés de positionnement de CSS pour créer des mises en page complexes. Voici un exemple qui positionne une image en bas à droite de son conteneur :
div {
position: relative;
width: 300px;
height: 200px;
}
img {
position: absolute;
bottom: 0;
right: 0;
object-fit: cover;
}
En combinant object-fit avec la propriété position, vous pouvez créer des effets intéressants et contrôler parfaitement l'apparence de vos images.
Conclusion
object-fit est une propriété CSS très utile pour contrôler le redimensionnement et le positionnement des images dans leur conteneur. En utilisant cette propriété, vous pouvez vous assurer que vos images s'adaptent parfaitement à leur contexte, quels que soient leur taille et leur ratio. En utilisant les valeurs possibles de la propriété, vous pouvez créer des effets intéressants et des mises en page complexes. N'hésitez pas à expérimenter avec object-fit pour créer des designs innovants et attrayants !
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.objectFit="cover" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 31 | 16 | 36 | 7.1 | 19 |
Exemple : Coupez les côtés d'une image, en préservant le rapport d'aspect, et remplissez l'espace :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css object-fit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>La propriété css object-fit</h1>
<h2>object-fit: cover:</h2>
<p>Coupez les côtés d'une image, en préservant le rapport d'aspect, et en remplissant aussi l'espace :</p>
<img class="a" src="images/village.png" alt="Village" width="400" height="300">
<h2>Original image:</h2>
<img src="images/village.png" alt="Village" width="400" height="300">
<p>Note : la propriété object-fit n'est pas prise en charge dans Internet Explorer/Edge 15 ou antérieur.</p>.
</body>
</html>