jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Calculateur de ratio d'aspect

Calculez les valeurs CSS aspect-ratio et les fallbacks padding-bottom contre le layout shift.

Chargement de l'outil...

Qu'est-ce que Calculateur de ratio d'aspect ?

Aspect-ratio est une propriete CSS qui definit un rapport hauteur-largeur preferentiel pour un element, permettant au navigateur de calculer la hauteur a partir de la largeur avant le chargement du contenu. Cela empeche le Cumulative Layout Shift (CLS), une metrique Core Web Vitals qui mesure la stabilite visuelle. En reservant l'espace correct pour les images, les videos et les integrations a l'avance, la mise en page de la page reste stable pendant le chargement des ressources.

Réponse rapide

Calculez la valeur CSS aspect-ratio et le pourcentage de repli padding-bottom pour empecher le Cumulative Layout Shift. Reservez l'espace correct pour les images, les videos et les integrations avant leur chargement.

Last updated: 2026-06-11

Limites

  • La technique de repli padding-bottom necessite position: relative sur le conteneur parent et position: absolute sur l'element enfant pour un comportement de dimensionnement correct.
  • Aspect-ratio fonctionne uniquement lorsque l'element a une largeur definie. Si la largeur de l'element est auto ou non definie, le calcul aspect-ratio n'a pas de base pour calculer la hauteur.
  • Utiliser aspect-ratio sans largeur ou hauteur definie sur les images peut provoquer un Cumulative Layout Shift pendant le chargement de la page. Definissez toujours un attribut de largeur ou de hauteur sur les elements img ou une dimension CSS explicite avec aspect-ratio afin que le navigateur puisse reserver l'espace avant le chargement de l'image.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez un rapport predefini tel que 16:9, 4:3 ou 1:1, ou saisissez des valeurs de largeur et hauteur personnalisees.
  2. Consultez la valeur CSS aspect-ratio generee pour les navigateurs modernes.
  3. Copiez le repli padding-bottom pour les navigateurs qui ne supportent pas la propriete aspect-ratio.
  4. Appliquez le balisage d'encapsulation a votre element image ou integration. L'espace reserve conserve la bonne hauteur avant le chargement de la ressource.

A quoi il sert

  • Reserver de l'espace pour les images hero sur les articles de blog afin que la mise en page ne saute pas lorsque l'image se charge.
  • Creer des conteneurs d'integration video stables pour les iframes YouTube ou Vimeo qui preservent le rapport hauteur-largeur du lecteur.
  • Construire des boites d'espace reserve pour les images a chargement differe dans une grille de galerie.

Cas d'usage

Exemples concrets

Exemple

Image hero de blog avec rapport 16:9

Un blog encapsule l'image hero dans un conteneur avec aspect-ratio: 16/9. Le navigateur reserve une boite 16:9 avant le chargement de l'URL de l'image, empechant le titre et le texte d'introduction de se deplacer vers le bas.

Exemple

Integration video avec repli padding-bottom

Une page de tutoriel integre des iframes YouTube dans un encapsuleur 16:9. La propriete aspect-ratio gere les navigateurs modernes, et le repli padding-bottom: 56.25% couvre Safari 14 et les anciens navigateurs Android.

Erreurs frequentes

  • Appliquer aspect-ratio a une image mais ne pas definir de largeur, ce qui laisse l'element avec une taille nulle dans certains contextes de mise en page.
  • Ajouter un attribut de hauteur fixe sur le meme element qui utilise aspect-ratio, ce qui cree un conflit et casse le rapport.
  • Utiliser aspect-ratio sans tester le repli padding-bottom dans les navigateurs qui ne le supportent pas, ce qui provoque un decalage de mise en page dans les navigateurs plus anciens.

Vérification

  1. Chargez la page a differentes largeurs de zone d'affichage et verifiez que l'espace reserve maintient le rapport hauteur-largeur correct sans decalage de mise en page lors du chargement de l'image.
  2. Testez sur un navigateur plus ancien en desactivant temporairement la propriete aspect-ratio dans DevTools et en confirmant que le repli padding-bottom preserve le rapport.

FAQ

Questions sur Calculateur de ratio d'aspect

Quels navigateurs supportent la propriete CSS aspect-ratio ?

Aspect-ratio est supporte dans tous les navigateurs modernes depuis 2024. Chrome 88, Firefox 87, Safari 15 et Edge 88 le supportent tous. Pour les navigateurs plus anciens, utilisez le repli du pourcentage padding-bottom.

Quel est un bon rapport hauteur-largeur par defaut pour les images de blog ?

Le 16:9 est un choix courant pour les images hero de blog et les integrations video. Le 4:3 fonctionne bien pour les captures d'ecran et les photos. Le 1:1 est utile pour les photos de profil et les vignettes de produits.

Ai-je encore besoin de l'astuce padding-bottom ?

Le repli du pourcentage padding-bottom n'est necessaire que pour les navigateurs qui ne supportent pas la propriete CSS aspect-ratio. La plupart des navigateurs modernes supportent directement aspect-ratio. Utilisez le repli lorsque vous devez supporter Safari 14 et anterieur ou les anciens navigateurs Android.

Dois-je definir a la fois la largeur et la hauteur avec aspect-ratio ?

Definir a la fois la largeur et la hauteur sur l'element avec aspect-ratio cree un conflit de dimensionnement. La propriete aspect-ratio calcule la dimension manquante a partir de celle que vous definissez. Definissez une dimension avec aspect-ratio ou utilisez une largeur et une hauteur explicites sans aspect-ratio.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi