Générateur de aspect-ratio CSS

Saisissez une largeur et une hauteur pour obtenir instantanément la valeur CSS aspect-ratio correspondante, simplifiée et avec aperçu visuel. Le calcul se fait entièrement dans votre navigateur, rien n'est envoyé à un serveur.

Formats courants :
Code CSS

Comment ça marche

La propriété CSS aspect-ratio permet de conserver automatiquement les proportions d'un élément (image, vidéo, conteneur) même lorsque sa largeur change, sans recourir à des astuces de padding en pourcentage. Cet outil calcule le rapport à partir des dimensions saisies, le simplifie si possible, et affiche un aperçu du rectangle obtenu.

Pourquoi utiliser aspect-ratio plutôt qu'une hauteur fixe ?

Une hauteur fixe en pixels casse la mise en page sur un écran plus étroit ou plus large ; aspect-ratio conserve le bon rapport largeur/hauteur quelle que soit la taille réelle de l'élément, ce qui est particulièrement utile pour les vidéos responsives, les cartes d'images ou les miniatures de galerie.

Que signifie le ratio simplifié affiché ?

L'outil réduit automatiquement votre rapport largeur/hauteur à sa forme la plus simple (par exemple 1920 / 1080 devient 16 / 9) grâce au plus grand diviseur commun, ce qui donne une valeur plus lisible et plus facile à réutiliser dans votre feuille de style.

Traitement 100% local : le calcul et l'aperçu s'exécutent uniquement dans votre navigateur.