oujood.com

Comment définir le rapport d'aspect d'un élément en CSS : propriété aspect-ratio

La propriété aspect-ratio est utilisée pour définir le rapport d'aspect préféré de la boîte. Cette propriété affiche les différentes tailles des boîtes sur la base des valeurs de rapport d'aspect.
La mise en page des éléments HTML peut être un défi, surtout lorsque vous souhaitez maintenir un certain rapport d'aspect pour vos conteneurs. C'est là que la propriété CSS aspect-ratio entre en jeu, offrant une solution élégante et simple.

chercher |

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion8888891574

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.





Voir aussi nos tutoriel :

fonction substr_count, substr_count

Compte le nombre d'occurrences de segments dans une chaîne

Balise video

Afficher une vidéo ou un film

attributs de formulaire et input

Nouveaux attributs de formulaire et input