Calculateur de Ratio d'Aspect — Dimensions Responsive
Calculez les dimensions manquantes à partir des ratios d'aspect avec notre Calculateur de Ratio d'Aspect. Générez du code CSS pour les médias responsives avec la propriété moderne aspect-ratio ou la technique legacy padding-bottom. Parfait pour les images responsives, les embeds vidéo et la conception de mise en page avec des presets courants comme 16:9, 4:3, 21:9 et plus.
Fonctionnalités
- Calculer la largeur ou hauteur manquante à partir du rapport d'aspect
- Préréglages de rapports courants (16:9, 4:3, 21:9, 1:1, etc.)
- Générateur de l'astuce CSS padding-bottom
- Formats de rapport multiples (rapport, décimal, pourcentage)
- Calculateur de tailles d'image responsive
- Calcul en temps réel
- Traitement 100% côté client
Rapports d'Aspect Courants
- 16:9 — Vidéo HD standard, YouTube, écrans modernes
- 4:3 — TV classique, anciens moniteurs
- 21:9 — Moniteurs ultra-larges, cinématographique
- 1:1 — Carré (publications Instagram)
- 9:16 — Vidéo verticale (Instagram Stories, TikTok)
Cas d'Utilisation Courants
- Images Responsive: Maintenir le rapport d'aspect lors du redimensionnement des images
- Intégrations Vidéo: Calculer les dimensions d'iframe pour YouTube, Vimeo
- Rapport d'Aspect CSS: Générer l'astuce padding-bottom pour les anciens navigateurs
- Redimensionnement d'Image: Calculer les dimensions de recadrage ou redimensionnement
- Conception de Mise en Page: Planifier des mises en page de grille responsive
Techniques CSS de Rapport d'Aspect
Approche moderne (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Approche legacy (astuce padding-bottom):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Ressources Utiles
Wikipedia: Format d'image Introduction accessible pour débutants sur les rapports d'aspect dans les images et vidéos
MDN: Propriété CSS aspect-ratio Propriété CSS moderne pour maintenir les rapports d'aspect
Smashing Magazine: Aspect Ratio en CSS Guide complet pour maintenir les rapports d'aspect en CSS moderne
W3C CSS Box Sizing Module Spécification officielle pour CSS aspect-ratio
Nouvelle Propriété CSS Aspect-Ratio Guide Google web.dev sur le traitement moderne du rapport d'aspect