Aspect Ratio Calculator

Calculateur · sortie CSS · responsive

L’Aspect Ratio Calculator calcule largeur et hauteur en pixels à partir d’un rapport (ex. 16:9, 4:5), génère des extraits CSS avec aspect-ratio et la technique du padding-top, et propose un tableau des hauteurs pour des largeurs fréquentes. Utile pour les frames Figma et le front (cartes, images, vidéo).

Rapport d'aspect

Dimensions

largeur (px)

hauteur (px)

Unités :

Verrouiller le ratio lors du redimensionnement

Tailles courantes (pour ce ratio)

Largeur de conteneur

Calcule la hauteur pour des largeurs de conteneur typiques

16 : 9

Aspect ratio en CSS

Méthode moderne : la propriété aspect-ratio est bien supportée et adaptée aux nouveaux projets.

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

Méthode legacy : le padding-top en pourcentage est calculé sur la largeur, ce qui impose un ratio lorsque aspect-ratio n’est pas utilisable.

.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.inner {
  position: absolute;
  inset: 0;
}

WordPress : pour les images ACF ou miniatures, combinez aspect-ratio et object-fit: cover.

.card-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

Pour les iframes vidéo avec contraintes navigateurs très anciennes, le padding-top avec position absolue reste une option ; sinon privilégiez aspect-ratio.

Pourquoi un calculateur d'aspect ratio

Figma : définissez le ratio du frame et obtenez des paires largeur/hauteur alignées avec le CSS.
CSS prêt à l’emploi : aspect-ratio, repli padding-top, variables :root.
Responsive : tableau et aperçu des proportions.

Outils liés : Spacing Scale Generator et Design Token Formatter.