Aspect Ratio Calculator

Calculateur · sortie CSS · responsive

Saisissez largeur et hauteur pour obtenir le ratio simplifié, les dimensions redimensionnées et le code CSS. Syntaxe aspect-ratio moderne et padding-top pour compatibilité étendue.

Rapport d'aspect
Dimensions
largeur (px)
hauteur (px)
Unités :
Verrouiller le ratio lors du redimensionnement
Tailles courantes (pour ce ratio)
Largeur de conteneur

Calcule la hauteur pour des largeurs de conteneur typiques

16 : 9

                                        


                                        

                                            

                                        


                                        

                                            

                                                
Aspect ratio en CSS
Méthode moderne : la propriété aspect-ratio est bien supportée et adaptée aux nouveaux projets.
.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}
Méthode legacy : le padding-top en pourcentage est calculé sur la largeur, ce qui impose un ratio lorsque aspect-ratio n’est pas utilisable.
.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.inner {
  position: absolute;
  inset: 0;
}
WordPress : pour les images ACF ou miniatures, combinez aspect-ratio et object-fit: cover.
.card-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}
Pour les iframes vidéo avec contraintes navigateurs très anciennes, le padding-top avec position absolue reste une option ; sinon privilégiez aspect-ratio.
                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Le ratio d'aspect est fondamental dans la construction de mises en page responsives : les images, vidéos, cartes et sections hero doivent maintenir les proportions correctes sur chaque appareil. La propriété CSS aspect-ratio moderne a remplacé l'ancienne astuce du padding-top en pourcentage, mais les deux sont utiles pour garantir la compatibilité.
Ce calculateur :
  • Calcule le ratio d'aspect simplifié (ex. 1920×1080 → 16:9)
  • Calcule les dimensions proportionnelles selon une contrainte
  • Génère le CSS avec aspect-ratio: 16/9 (syntaxe moderne)
  • Génère le padding-top en pourcentage équivalent
  • Utile pour les conteneurs vidéo YouTube/Vimeo intégrés
Pourquoi un calculateur d'aspect ratio
  • Figma : définissez le ratio du frame et obtenez des paires largeur/hauteur alignées avec le CSS.
  • CSS prêt à l’emploi : aspect-ratio, repli padding-top, variables :root.
  • Responsive : tableau et aperçu des proportions.
Outils liés : Spacing Scale Generator et Design Token Formatter.