OUJOOD.COM
La propriété CSS object-position
La propriété CSS object-position permet de définir la position d'un objet dans son conteneur. Elle est souvent utilisée avec des images et des vidéos pour les aligner correctement dans leur conteneur. Voici la syntaxe générale :
object-position: position|initial|inherit;
Les valeurs possibles de la propriété object-position sont :
- position : spécifie la position de l'objet dans son conteneur. Cette valeur peut être exprimée en pourcentage ou en pixels.
- initial : rétablit la valeur par défaut de la propriété.
- inherit : hérite de la valeur de la propriété de son parent.
Voici quelques exemples d'utilisation de la propriété object-position :
- Aligner une image au centre de son conteneur :
object-position: 50% 50%;
object-position: right bottom;
object-position: 0 0;
Voici quelques astuces d'utilisation de la propriété object-position :
- Utilisez la valeur center pour centrer verticalement et horizontalement un objet dans son conteneur.
- Utilisez des pourcentages plutôt que des pixels pour rendre votre code plus flexible et adaptatif, ainsi votre page sera pésponsive.
- Utilisez la propriété object-fit en conjonction avec la propriété object-position pour contrôler le dimensionnement de l'objet dans son conteneur.
| Valeurs par défaut | 50% 50% |
|---|---|
| Inherited: | oui |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.objectPosition="0 10%" |
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 | 10 | 7 17 |
Exemple Redimensionnez une image pour qu'elle s'adapte à son cadre de contenu, et positionnez l'image à 5px de la gauche et à 10% du haut à l'intérieur du cadre de contenu :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css object-position</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>La propriété css object-position</h1>
<h2>object-fit: cover et object-poition : 5px 10%</h2>
<p>Redimensionnez une image pour qu'elle s'adapte à son cadre de contenu, et positionnez l'image à 5px de la gauche et à 10% du haut à l'intérieur du cadre de contenu:</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>