search

Found

info Aperçu

Convertit tout ratio largeur:hauteur en pourcentage de padding-top pour boîtes responsives, avec le fragment hérité et une version aspect-ratio.

📘 Mode d'emploi

  1. Choisissez un ratio prédéfini ou saisissez une valeur W et H personnalisée
  2. Lisez le pourcentage de padding-top et vérifiez l'aperçu
  3. Sélectionnez le fragment hérité ou la version aspect-ratio selon votre projet

Calculateur de padding CSS par ratio

W
:
H
16:9 — 56.25%

Valeur de padding-top

56.25 %

CSS (astuce padding-top)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS moderne (aspect-ratio)

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

grid_view Similaires

Article

Calculateur de padding CSS par ratio | Pourcentage de padding-top pour tout ratio

Saisissez un ratio largeur:hauteur et obtenez le pourcentage de padding-top utilisé par l'astuce classique de boîte responsive. L'outil affiche côte à côte le fragment hérité basé sur position et une version moderne avec aspect-ratio, avec un aperçu pour confirmer la forme avant de copier.

💡 À propos de cet outil

  • Du ratio au pourcentage : Convertit des ratios comme 16:9 ou 4:3 en une valeur telle que padding-top: 56.25%. Inutile de calculer à la main hauteur ÷ largeur × 100.
  • Deux fragments au même endroit : Affiche l'astuce du padding-top (fonctionne sur les anciens navigateurs) et la propriété aspect-ratio, plus concise. Choisissez celui qui correspond à la compatibilité de votre projet.
  • Aperçu de la forme : Un cadre d'aperçu rend les proportions réelles du ratio saisi, pour vérifier le résultat d'un coup d'œil.
  • Six préréglages : 16:9, 4:3, 1:1, 21:9, 3:2 et 9:16 sont accessibles en un clic, couvrant les vidéos intégrées, les vignettes carrées, les bannières ultra-larges et la vidéo verticale.

🧐 Questions fréquentes

Q. Pourquoi le padding-top préserve-t-il un ratio ?

R. En CSS, le padding en pourcentage est calculé par rapport à la largeur du bloc conteneur, et non à sa hauteur. Ainsi padding-top: 56.25% réserve une hauteur égale à 56,25 % de la largeur de l'élément, et cette relation tient même lorsque la largeur change. L'astuce du padding-top exploite précisément cette particularité.

Q. Si aspect-ratio existe, pourquoi garder l'ancienne astuce ?

R. La propriété aspect-ratio règle le problème en une ligne, mais elle n'a aucun effet sur les navigateurs anciens. Sur des intranets, des appareils embarqués ou tout environnement à matrice de navigateurs limitée, l'astuce du padding-top reste le choix fiable. Comparez les deux fragments et déployez celui qui correspond à vos cibles de compatibilité.

Q. Comment ajuster un iframe ou une image au ratio ?

R. Avec l'astuce du padding-top, définissez la boîte externe en position: relative, puis fixez l'enfant avec position: absolute, top/left: 0 et width/height: 100%. Le fragment généré par cet outil contient déjà cette structure, vous pouvez donc y placer directement un iframe ou un img.

Q. Que se passe-t-il avec des ratios qui ne tombent pas juste ?

R. Un ratio comme 3:2 donne un décimal périodique tel que 66,6666…%. L'outil ne conserve que le nombre de décimales nécessaire, si bien que l'erreur d'arrondi est négligeable en pratique.

📚 Le saviez-vous

L'astuce du padding-top s'est imposée après que Thierry Koblentz l'a documentée sous le titre « Intrinsic Ratios in Web Design » sur A List Apart en 2009. À une époque où CSS n'avait aucun moyen natif d'exprimer un ratio, la technique reposait sur un détail méconnu de la spécification — le fait que le padding en pourcentage est relatif à la largeur — et elle est devenue la façon canonique de rendre les vidéos intégrées responsives.

Plus d'une décennie plus tard, les navigateurs ont implémenté la propriété native aspect-ratio, avec un support stable sur les principaux moteurs vers 2021. L'astuce n'a pourtant pas totalement disparu : comprendre son fonctionnement reste utile pour lire d'anciens projets ou prendre en charge des navigateurs en retard sur le standard.