Calculateur de ratio d'aspect

À propos de cet outil

Ce calculateur couvre les trois besoins courants autour des proportions d'un écran, d'une image ou d'une vidéo. Le premier mode calcule la dimension manquante à partir d'un ratio (16:9, 4:3, 1:1, 21:9, ou le vôtre). Le deuxième réduit une taille en pixels à son ratio simplifié et reconnaît le format courant le plus proche. Le troisième adapte une image à une zone d'affichage et indique les tailles obtenues avec un ajustement « contain » (l'image tient entièrement) ou « cover » (elle remplit la zone en étant rognée). Le code CSS correspondant (aspect-ratio, avec un repli pour les anciens navigateurs) est généré à chaque fois.

Comment utiliser cet outil

1. Choisissez ce que vous voulez calculer : une dimension, le ratio d'une taille ou l'adaptation à une zone.
2. Selon le mode, sélectionnez un ratio courant (ou saisissez le vôtre) puis la largeur ou la hauteur connue, ou saisissez directement deux dimensions.
3. Lisez les résultats et le tableau des tailles courantes pour ce ratio.
4. Copiez le code CSS (aspect-ratio ou object-fit) pour l'utiliser dans votre feuille de style.

Qu'est-ce qu'un ratio d'aspect ?

Le ratio d'aspect (ou rapport d'aspect, en anglais aspect ratio) est le rapport entre la largeur et la hauteur d'une image, d'un écran ou d'une vidéo. Il s'écrit sous la forme largeur:hauteur : un écran 16:9 est 16 unités de large pour 9 de haut, quelle que soit sa taille réelle. C'est une valeur sans unité : un téléviseur de 32 pouces et un autre de 65 pouces peuvent partager le même ratio.

Pour retrouver le ratio d'une taille, on divise les deux dimensions par leur plus grand diviseur commun : 1 920 × 1 080 donne un diviseur de 120, donc 16:9. Si les dimensions n'ont pas de diviseur utile (1 366 × 768 donne 683:384, une fraction sans intérêt pratique), mieux vaut comparer leur valeur décimale à celle des formats connus : 1 366 ÷ 768 = 1,7786, soit à 0,04 % du 16:9 (1,7778). C'est ce que fait le mode « Le ratio d'une taille » de l'outil.

Les formats courants et leur usage

Les formats de papier de la série A sont un cas à part : le rapport de 1:√2 (1,4142) est choisi pour qu'une feuille pliée en deux conserve exactement les mêmes proportions. D'où la possibilité d'agrandir ou de réduire un A4 en A3 ou A5 sans déformer le contenu. Le nombre d'or (environ 1,618) est parfois utilisé en composition, mais ce n'est pas un format normalisé.

Les dimensions recommandées par chaque plateforme évoluent régulièrement : vérifiez la page d'aide de la plateforme avant de produire vos visuels en série. Pour les images de partage, le protocole Open Graph ne fixe pas de taille, mais un rapport proche de 1,91:1 (par exemple 1 200 × 630 px) est le plus répandu.

En CSS : la propriété aspect-ratio

Pendant longtemps, il fallait un hack pour garder un ratio : un conteneur à position: relative dont le padding-top en pourcentage valait hauteur ÷ largeur (56,25 % pour 16:9), avec un contenu en position: absolute. Cela fonctionne parce que les pourcentages de marge intérieure se calculent par rapport à la largeur du conteneur. Les navigateurs actuels proposent directement la propriété aspect-ratio :

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

La hauteur se déduit alors de la largeur disponible. Quelques points de vigilance, tirés de la documentation :

• Le ratio est une valeur préférée : si le contenu est trop grand pour la hauteur calculée, la boîte grandit (sauf si vous avez fixé les deux dimensions, auquel cas aspect-ratio est ignorée). Ajoutez min-height: 0 et overflow: hidden si vous devez réellement contraindre la boîte.
• On peut écrire aspect-ratio: 1.91 / 1 ou un simple nombre (aspect-ratio: 1.5).
• Le mot-clé auto utilise le ratio naturel d'une image ou d'une vidéo ; auto 16 / 9 garde 16 / 9 tant que le contenu n'est pas chargé.
• Pour un rond parfait, combinez aspect-ratio: 1 et border-radius: 50%.

Sur les balises img et video, renseignez aussi les attributs width et height du HTML : le navigateur en déduit le ratio avant le chargement de l'image et réserve la place, ce qui évite que le contenu ne « saute » à l'arrivée de l'image (le décalage cumulé de mise en page, ou CLS, l'un des indicateurs de performance de Google).

Adapter une image à une zone : contain ou cover

Quand une image n'a pas le même ratio que la zone qui l'accueille, il faut choisir ce que l'on sacrifie. Le mode « Adapter à une zone » calcule les deux solutions :

• contain : l'image est réduite (ou agrandie) jusqu'à ce que ses deux dimensions tiennent dans la zone. Rien n'est coupé, mais des bandes apparaissent sur les côtés ou en haut et en bas. Le facteur d'échelle est le plus petit des deux rapports (largeur de la zone ÷ largeur de l'image, hauteur de la zone ÷ hauteur de l'image).
• cover : l'image est agrandie jusqu'à couvrir toute la zone. Il n'y a plus de bande, mais une partie de l'image est rognée. Le facteur est cette fois le plus grand des deux rapports.

En CSS, ces deux comportements correspondent à object-fit: contain et object-fit: cover, avec object-position pour choisir la partie visible quand l'image est rognée (par défaut, le centre). Pour un portrait recadré dans une vignette, object-position: center top préserve le plus souvent le visage.

Redimensionner sans déformer

• Changez toujours une seule dimension et déduisez l'autre : saisir à la main une largeur et une hauteur indépendantes étire l'image.
• Arrondissez au pixel entier, comme le fait l'outil. Un écart d'un pixel sur le ratio est invisible.
• Passer d'un ratio à un autre suppose de recadrer : aucun calcul ne permet de transformer un 4:3 en 16:9 sans perdre une partie de l'image ou ajouter des bandes. Le recadrage doit se faire avant l'export, sur la partie utile du visuel.
• Produisez des tailles multiples pour les images web (attribut srcset) : le tableau des tailles courantes de l'outil donne des hauteurs pour les largeurs usuelles (320, 640, 800, 1 024, 1 280, 1 920 px, etc.).
• Pour changer la taille d'une image, utilisez le redimensionneur d'images ; pour en réduire le poids, le compresseur d'images.

Questions fréquentes