Définition et utilisation da la propriété css aspect-ratio
La propriété aspect-ratio vous permet de définir le rapport entre la largeur et la hauteur d'un élément.Si les propriétés aspect-ratio et width sont définies, la hauteur suivra dans le rapport d'aspect défini.
Pour mieux comprendre la propriété aspect-ratio, visionnez une démo.
Astuce : utilisez la propriété aspect-ratio dans les mises en page réactives où la taille des éléments varie souvent et où vous souhaitez préserver le rapport entre la largeur et la hauteur.
La Syntaxe CSS
aspect-ratio: nombre1/nombre2|initial|inherit;
Valeurs de la propriété aspect-ratio
nombre1 Le premier numéro indique le numéro de la largeur dans le rapport d'aspect.nombre2 Le second numéro indique le numéro de la hauteur dans le rapport d'aspect. Facultatif. S'il n'est pas défini, le numéro de la hauteur est 1 par défaut.
initial Définit cette propriété à sa valeur par défaut. En savoir plus sur initial.
inherit Hérite de cette propriété de son élément parent. Lire à propos de inherit.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.aspectRatio="16/9" |
Prise en charge de la propriété css aspect-ratio 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-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 88 | 88 | 89 | 15 | 74 |
Utilisation de la propriété aspect-ratio
La propriété aspect-ratio permet de définir le rapport d'aspect d'un élément, c'est-à-dire la relation entre sa largeur et sa hauteur. Elle peut être appliquée à n'importe quel élément avec une largeur et une hauteur définies, comme les divs, les images, les vidéos, etc.
Voici un exemple d'utilisation de la propriété aspect-ratio :
Exemple 📋 Copier le code
<div class="aspect-ratio-container"> <div class="aspect-ratio-content"></div> </div>
Exemple 📋 Copier le code
<style>
.aspect-ratio-container {
width: 300px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.aspect-ratio-content {
width: 100%;
aspect-ratio: 16/9; /* Exemple de rapport d'aspect 16:9 */
background-color: #f0f0f0;
}
</style>
Dans cet exemple, le conteneur a une largeur de 300 pixels, mais grâce à la propriété aspect-ratio, son rapport d'aspect est maintenu à 16:9, assurant ainsi que le contenu à l'intérieur conserve cette proportion.
Pourquoi utiliser aspect-ratio ?
L'utilisation de la propriété aspect-ratio peut être bénéfique dans de nombreux cas :
- Lorsque vous devez afficher des images ou des vidéos avec un rapport d'aspect spécifique, sans déformation.
- Pour créer des mises en page responsives où le contenu doit s'adapter à différentes tailles d'écrans tout en conservant ses proportions.
- Pour améliorer l'accessibilité en garantissant que le contenu reste lisible et cohérent, quel que soit le périphérique utilisé pour afficher la page.
Conclusion
La propriété CSS aspect-ratio offre une solution simple et efficace pour définir le rapport d'aspect des éléments HTML. Que vous travailliez sur des images, des vidéos, des mises en page responsives ou tout autre élément nécessitant un rapport d'aspect spécifique, aspect-ratio vous permet de le faire de manière élégante et sans tracas.