Calculateur de Rapport d'Aspect

Comprendre les rapports d'aspect

Un rapport d'aspect est la relation proportionnelle entre la largeur et la hauteur d'une image ou d'une vidéo, exprimée sous forme de deux nombres séparés par deux-points. 16:9 signifie que pour chaque 16 pixels de large, il y a 9 pixels de haut. Les rapports d'aspect sont sans dimension — 1920×1080 et 1280×720 sont tous deux en 16:9 car ils partagent la même proportion.

Rapports courants et leurs usages

• 16:9 (1,78:1) — Le standard universel de la vidéo grand écran : YouTube, Netflix, Vimeo, Twitch, émissions TV, moniteurs de bureau, écrans d'ordinateurs portables.
• 4:3 (1,33:1) — Standard TV et moniteur hérité. Encore utilisé pour les présentations, certaines applications iPad, la vidéo en définition standard.
• 1:1 — Format carré. Feed Instagram, photos de profil, pochettes d'albums. Impact visuel fort, aussi large que haut.
• 9:16 (0,56:1) — Vidéo verticale pour TikTok, Instagram Reels et Stories, YouTube Shorts. Le format « plein écran mobile ».
• 4:5 (0,8:1) — Publications portrait dans le feed Instagram. Plus haut que le carré, affiche plus de contenu sans être totalement vertical.
• 21:9 (2,33:1) — Ultra-large cinématographique. Utilisé au cinéma (format scope 2,39:1) et sur les moniteurs ultra-larges.
• 3:2 (1,5:1) — Pellicule 35 mm traditionnelle et de nombreux appareils photo numériques. Proportions standard des tirages photo.

Comment conserver le rapport d'aspect lors d'un redimensionnement

Pour mettre à l'échelle une image en préservant son rapport, multipliez les deux dimensions par le même facteur d'échelle. Pour trouver une hauteur proportionnelle à une nouvelle largeur : nouvelle hauteur = (nouvelle largeur / largeur d'origine) × hauteur d'origine.

Exemple : mettre à l'échelle 1920×1080 pour une largeur de 1280 pixels : 1080 × (1280 / 1920) = 1080 × 0,667 = 720 pixels. Le résultat, 1280×720, conserve le rapport 16:9.

La propriété CSS aspect-ratio

La propriété CSS aspect-ratio (prise en charge par tous les navigateurs modernes depuis 2021) vous permet de déclarer le rapport souhaité d'un élément sans connaître les deux dimensions. Définir aspect-ratio: 16 / 9 sur un conteneur en lui donnant uniquement une width amène le navigateur à calculer automatiquement la hauteur correcte. Cela remplace les anciennes techniques de rembourrage en pourcentage.

Questions fréquentes

• Qu'est-ce qu'un rapport d'aspect ?
  Un rapport d'aspect décrit la relation proportionnelle entre la largeur et la hauteur d'une image ou d'une vidéo, exprimée sous forme de deux nombres (ex. 16:9). Un rapport 16:9 signifie que la largeur est de 16 unités pour 9 unités de hauteur.
• Quel est le rapport d'aspect standard des vidéos YouTube ?
  Le rapport standard de YouTube est 16:9. Résolution recommandée : 1920×1080 (Full HD). Les miniatures doivent faire au minimum 1280×720, ou idéalement 1920×1080.
• Quels rapports d'aspect Instagram utilise-t-il ?
  Instagram prend en charge 1:1 (carré, 1080×1080), 4:5 (feed portrait, 1080×1350) et 9:16 (Stories/Reels, 1080×1920).
• Comment conserver le rapport d'aspect lors d'un redimensionnement ?
  Nouvelle hauteur = (nouvelle largeur / largeur d'origine) × hauteur d'origine. En CSS, utilisez aspect-ratio: 16 / 9 et ne définissez qu'une seule dimension — le navigateur calcule l'autre automatiquement.
• Quelles sont les résolutions 16:9 en pixels ?
  Résolutions 16:9 courantes : 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Toute dimension où largeur ÷ hauteur = 1,778 est en 16:9.
• À quoi sert la propriété CSS aspect-ratio ?
  La propriété CSS aspect-ratio déclare le rapport préféré d'un élément. Définir aspect-ratio: 16 / 9 avec seulement une largeur amène le navigateur à calculer la hauteur automatiquement. Prise en charge par tous les navigateurs modernes depuis 2021.