Comment utiliser : Calculateur de ratio d’aspect
- Saisissez un ratio (ou cliquez sur un ratio courant comme 16:9 ou 9:16).
- Entrez une largeur pour obtenir la hauteur correspondante, ou une hauteur pour obtenir la largeur.
- Pour trouver le ratio d’une image ou d’un écran existant, saisissez ses dimensions sous Trouver le ratio d’une taille ; cliquez sur Utiliser ce ratio pour redimensionner avec celui-ci.
- Copiez le CSS (
aspect-ratioavec la solution de repli padding-top) et choisissez une taille standard dans le tableau.
Qu’est-ce qu’un ratio d’aspect ?
Un ratio d’aspect est le rapport proportionnel entre la largeur et la hauteur, noté largeur:hauteur. Une vidéo 1920 × 1080 et une vidéo 1280 × 720 ont des dimensions différentes, mais partagent le même ratio 16:9 : l’une se met à l’échelle de l’autre sans étirement ni recadrage. Conserver le ratio lors d’un redimensionnement évite les images déformées et les bandes noires.
Formules du ratio d’aspect
- Nouvelle hauteur = nouvelle largeur × hauteur du ratio ÷ largeur du ratio, par exemple 1280 × 9 ÷ 16 = 720.
- Nouvelle largeur = nouvelle hauteur × largeur du ratio ÷ hauteur du ratio, par exemple 1080 × 16 ÷ 9 = 1920.
- Simplifier une taille : divisez les deux côtés par leur plus grand commun diviseur (PGCD). 1920 et 1080 ont un PGCD de 120, ce qui donne 16:9.
Certaines tailles ne se simplifient pas proprement : 1366 × 768 (une résolution courante pour ordinateur portable) se réduit à 683:384, soit à peu près 16:9. Le calculateur affiche le ratio exact ainsi que le ratio courant le plus proche.
Ratios d’aspect courants et leurs usages
| Ratio | Décimal | Usage typique |
|---|---|---|
| 16:9 | 1,778 | Vidéo HD/4K, YouTube, écrans, présentations |
| 9:16 | 0,5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1,333 | Anciennes télévisions et écrans, iPad, nombreux appareils compacts |
| 3:2 | 1,5 | Pellicule 35 mm, photos reflex et hybrides, ordinateurs Surface |
| 1:1 | 1 | Publications carrées sur les réseaux, avatars, vignettes produits |
| 4:5 | 0,8 | Publications portrait dans le fil d’Instagram et Facebook |
| 21:9 | ≈ 2,33 | Écrans ultrawide, vidéo cinéma |
| 1.91:1 | 1,91 | Images Open Graph / aperçus de lien (1200 × 630) |
Ratio d’aspect en CSS
Les navigateurs modernes prennent en charge la propriété aspect-ratio : aspect-ratio: 16 / 9; sur un élément avec une largeur lui donne la hauteur correspondante. C’est idéal pour les vidéos intégrées responsives, les cartes et les espaces réservés aux images, qui évitent les décalages de mise en page (bon pour le CLS des Core Web Vitals). L’ancienne technique est l’astuce padding-top : un conteneur avec height: 0; padding-top: 56.25% (9 ÷ 16 × 100), car les pourcentages de marge verticale sont calculés par rapport à la largeur de l’élément. Les deux sont générées ci-dessus. Pour les fichiers image eux-mêmes, utilisez le Redimensionneur d’images ; pour les aperçus de lien, le générateur d’image OG crée des images de 1200 × 630.
Aussi recherché comme : ratio d’aspect, calculateur ratio 16:9, calcul ratio image, calculateur de résolution, ratio vidéo, css aspect-ratio, astuce padding-top, format image 4:3.
Outils complémentaires : Calculateur de ratio d’aspect
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- Convertisseur PX en REM — Convertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de style entière pour convertir toutes les valeurs px d’un coup.
- Calculateur de pourcentage — Sept calculs de pourcentage courants sur une seule page.
- Convertisseur de chiffres romains — Convertissez n'importe quel nombre compris entre 1 et 3 999 999 en chiffres romains — ou transformez des chiffres romains en nombres — avec une explication détaillée de chaque symbole.
Questions fréquentes
Comment calculer la hauteur à partir de la largeur et du ratio d’aspect ?
Le format 1920×1080 est-il en 16:9 ?
Quel est le ratio d’aspect de 1080×1350 ?
Quelle est la valeur padding-top pour 16:9 ?
Faut-il utiliser aspect-ratio ou l’astuce padding en CSS ?
aspect-ratio : il est pris en charge par tous les navigateurs actuels et ne nécessite aucun conteneur. Gardez l’astuce padding uniquement si vous devez prendre en charge de très anciens navigateurs, comme Safari avant la version 15.