Calculateur de Ratio d'Aspect CSS

Contrôles

Sortie & CSS

Hauteur calculée 1080
Ratio 16 / 9

Tailles d'écran courantes

Sortie CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Saisissez une largeur — Tapez la largeur de l'élément en pixels pour calculer la hauteur correspondante.
    2.  
  2. Sélectionnez un ratio prédéfini — Choisissez 16:9, 4:3, 1:1, 3:2 ou 21:9 pour les ratios courants.
    3.  
  3. Utilisez un ratio personnalisé — Cliquez sur « Personnalisé » et saisissez n'importe quel ratio largeur:hauteur.
    4.  
  4. Voyez les tailles courantes — Le tableau affiche les hauteurs calculées pour 1920px, 1280px, 768px et 375px de large.
    5.  
  5. Copiez le CSS — Obtenez la propriété aspect-ratio prête à coller dans votre feuille de style.
    6.  
 
 
 
Qu'est-ce que la propriété CSS aspect-ratio ?
 
La propriété aspect-ratio définit le rapport largeur/hauteur d'un élément. Avec une largeur définie, le navigateur calcule la hauteur automatiquement — sans JavaScript. Idéale pour les images responsives, intégrations vidéo et cartes qui doivent conserver leurs proportions à toute taille.
 
Elle est prise en charge par tous les navigateurs modernes et remplace les anciennes astuces comme le « hack du padding-top en pourcentage » par une syntaxe propre et lisible.
 
 
 
Cas d'usage courants
 
 
Intégrations vidéo responsives
 
Réservation d'espace pour images
 
Vignettes de cartes uniformes
 
Éléments canvas
 
Conteneurs de cartes
 
Aperçus pour réseaux sociaux
 
 
Conseils & bonnes pratiques
 
 
 Combinez avec width: 100% 
Utilisez aspect-ratio avec width: 100% pour obtenir un élément entièrement fluide qui s'adapte à son conteneur tout en conservant ses proportions.
 
 
 Utilisez-la sur les éléments img 
aspect-ratio sur les balises img évite les décalages de mise en page au chargement — le navigateur réserve le bon espace avant que l'image ne charge.
 
 
 Remplacez par des dimensions explicites 
Si un élément a à la fois aspect-ratio et une hauteur explicite, la hauteur explicite l'emporte. Cela permet de remplacer le ratio au besoin sans retirer la propriété.
 
 
 16:9 pour la vidéo 
16:9 est le format large standard pour YouTube, Vimeo et la vidéo web. 4:3 convient aux vidéos anciennes ; 21:9 est l'ultra-large cinématique.
 
 
 
Questions fréquentes
 
 
Comment gérait-on le ratio d'aspect avant la propriété CSS ?
 
Les développeurs utilisaient le « hack du padding-top » : régler padding-top sur un pourcentage (par ex. 56,25 % pour 16:9) sur un conteneur en position: relative avec un enfant positionné en absolu. La propriété aspect-ratio rend cela inutile.
 
 
 
aspect-ratio fonctionne-t-il sur tous les éléments HTML ?
 
Oui — il fonctionne sur tout élément block ou inline-block, ainsi que sur les éléments flex et grid. Particulièrement utile sur img, video, iframe et les conteneurs div.
 
 
 
Quel est le ratio 16:9 en décimal ?
 
16 divisé par 9 donne environ 1,777. Pour la hauteur : divisez la largeur par 1,777. Pour la largeur : multipliez la hauteur par 1,777.
 
 
 
Puis-je utiliser aspect-ratio sans largeur ?
 
Oui. Si l'élément a une hauteur définie mais aucune largeur explicite, le navigateur calcule la largeur à partir du ratio. Plus rare, mais entièrement pris en charge.