Calculateur de rapport largeur/hauteur
Indiquez les dimensions d’origine, puis modifiez la largeur ou hauteur cible. Le résultat fournit les mesures proportionnelles et un extrait CSS.
Fonctionne localement dans votre navigateur ·
16:9
Indiquez les dimensions d’origine, puis modifiez la largeur ou hauteur cible. Le résultat fournit les mesures proportionnelles et un extrait CSS.
Fonctionne localement dans votre navigateurDeux dimensions en pixels entrent, trois résultats sortent : le rapport réduit, une seconde taille à la même proportion et une déclaration CSS pour l’élément qui doit garder sa forme. C’est du calcul sur des nombres : aucune image n’est ouverte, redimensionnée ou téléversée.
Tous les champs se recalculent pendant la saisie. La largeur et la hauteur source fixent le rapport, et le champ cible que vous modifiez recalcule l’autre côté : la proportion tient donc même avec une valeur à moitié tapée.
Le rapport réduit divise les dimensions source par leur plus grand commun diviseur : 1920 × 1080 devient 16:9 et 1366 × 768 devient 683:384, car ces deux nombres n’ont pas de diviseur commun plus petit. La taille proportionnelle est le couple cible arrondi au pixel entier. Le rapport décimal est largeur ÷ hauteur avec six décimales (1.777778 pour 16:9). Le padding de secours est hauteur ÷ largeur en pourcentage — 56.2500 % pour 16:9 —, la valeur dont la technique du padding en pourcentage a besoin.
Copier CSS écrit aspect-ratio: 16 / 9; pour la forme, width: 100%; pour que l’élément remplisse sa colonne, puis une ligne padding-top commentée comme secours. Gardez la ligne de padding si la même feuille doit tenir dans un moteur qui ignore la propriété aspect-ratio ; supprimez le bloc de commentaire sinon. Comme l’extrait utilise le couple réduit, un rapport comme 683:384 apparaît tel qu’il a été calculé.
Le couple n’utilise que des entiers : une dimension décimale est arrondie à l’entier le plus proche avant le calcul du plus grand commun diviseur, tandis que le rapport décimal et le pourcentage de padding conservent les valeurs saisies. Les préréglages sont réduits aussi, et c’est pourquoi 21:9 s’affiche 7:3, la même proportion sous sa forme minimale. Les deux dimensions source doivent être supérieures à zéro ; si l’une est vide, nulle ou négative, la ligne d’état le signale et le dernier résultat valide reste affiché.
Parce que chaque rapport est affiché sous sa forme irréductible : 21 et 9 sont divisibles par 3, donc 21:9 devient 7:3. La proportion est identique, et aspect-ratio: 7 / 3 calcule la même boîte que aspect-ratio: 21 / 9.
Les deux fonctionnent. Modifier la largeur recalcule la hauteur, et inversement : choisissez le côté que votre mise en page contraint réellement, une colonne de largeur fixe ou une hauteur fixe comme 600 px.
Il est écrit en commentaire et ne coûte rien. aspect-ratio décrit la forme en une propriété ; le padding en pourcentage est la technique plus ancienne pour les moteurs qui l’ignorent. Supprimez le commentaire seulement si tous vos navigateurs cibles la prennent en charge.
Oui. Le couple réduit est calculé à partir des entiers arrondis — 1920,5 × 1080,25 donne 1921:1080 —, alors que le rapport décimal (1.777829) et le pourcentage de padding utilisent les valeurs non arrondies.
Non. Il ne calcule que des nombres et du CSS ; le fichier n’est jamais ouvert. Utilisez le redimensionneur d’images quand les pixels doivent changer, et cette page pour le conteneur qui les affiche.