.svg)
Qu'est-ce que aspect-ratio en CSS ?
La propriété CSS aspect-ratio définit un rapport largeur/hauteur préféré pour un élément. Elle permet de maintenir des proportions constantes sans recourir au padding-bottom hack. Elle simplifie la gestion des ratios d'images, vidéos et conteneurs responsives.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
Syntaxe et fonctionnement
aspect-ratio: 16 / 9; pour widescreen, 1 / 1; pour un carré, 4 / 3; pour classique. La propriété fonctionne sur tous les éléments.
Cas d'usage
Conteneurs d'images responsives, placeholders de chargement, grilles de cartes uniformes, et intégrations vidéo. Combiné avec object-fit: cover, on obtient des images parfaitement cadrées.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
Conclusion
Aspect-ratio est une propriété CSS moderne qui élimine les hacks historiques pour maintenir les proportions et garantit des mises en page cohérentes sur tous les écrans.
À retenir
- Rapport largeur/hauteur pour tout élément
- Syntaxe : 16/9 (widescreen), 1/1 (carré)
- Remplace le padding-bottom hack
- Combinable avec object-fit: cover
- Supporté par tous les navigateurs modernes
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
