Générateur de boîtes de rapport d'aspect Générer des boîtes de rapport d'aspect réactives avec les approches CSS modernes et héritées.
Générateur de boîtes de rapport d'aspect
Générer des boîtes de rapport d'aspect réactives avec les approches CSS modernes et héritées.
Sélectionnez un ratio prédéfini ou personnalisé
Choisissez parmi des rapports d'aspect courants (16:9, 4:3, 1:1) ou entrez des valeurs personnalisées.
Configurez la boîte
Définissez la largeur maximale, la couleur de fond et choisissez entre l'approche moderne ou héritée du CSS.
Copiez le CSS
Prévisualisez la boîte de rapport d'aspect et copiez le code CSS.
What Is Générateur de boîtes de rapport d'aspect?
Le générateur de boîtes de rapport d'aspect crée des conteneurs responsives qui maintiennent un rapport largeur-hauteur spécifique quel que soit leur taille. Le maintien des rapports d'aspect est essentiel pour les vidéos, les images, les cartes et tout élément nécessitant des dimensions proportionnelles. Cet outil propose huit présélections courantes : 1:1 (carré), 4:3 (standard), 16:9 (écran large), 21:9 (ultra-large), 3:2 (photo), 9:16 (portrait), 2:3 (affiche) et 3:4 (tablette). Vous pouvez également définir des valeurs de rapport personnalisées. L'outil prend en charge à la fois la propriété CSS aspect-ratio moderne et la technique de padding-bottom héritée pour une prise en charge plus large des navigateurs. L'aperçu affiche la boîte de rapport d'aspect avec une largeur maximale et une couleur de fond personnalisables, et le CSS généré inclut l'approche choisie.
Why Use Générateur de boîtes de rapport d'aspect?
-
Huit ratios prédéfinis courants plus une saisie personnalisée
-
Les deux approches modernes (aspect-ratio) et héritées (padding-bottom) du CSS
-
Largeur maximale et couleur de fond personnalisables
-
La prévisualisation affiche avec précision la boîte proportionnelle
Common Use Cases
Conteneurs de vidéos
Créez des conteneurs responsives 16:9 pour les vidéos intégrées.
Éléments graphiques de remplacement
Réservez un espace pour les images pendant leur chargement pour éviter les décalages de mise en page.
Cartes responsives
Maintenez des proportions de carte cohérentes sur différents tailles d'écran.
Galeries de photos
Créez des conteneurs d'images uniformes pour les mises en page de grille de galerie.
Technical Guide
La propriété CSS aspect-ratio moderne définit directement le rapport d'aspect préféré : aspect-ratio: 16 / 9. Le navigateur calcule automatiquement la hauteur en fonction de la largeur de l'élément. Cela est pris en charge dans tous les navigateurs modernes depuis 2021. La technique héritée utilise padding-bottom comme pourcentage de la largeur (puisque les pourcentages de padding sont relatifs à la largeur du parent) : padding-bottom: 56,25% crée un rapport 16:9 (9/16 * 100 = 56,25%). L'approche héritée nécessite position: relative sur le conteneur et position: absolute; top: 0; left: 0; width: 100%; height: 100% sur le contenu de l'enfant. L'approche moderne est plus simple et plus lisible. Les deux méthodes créent des conteneurs responsives qui maintiennent leur rapport à toute largeur. La propriété max-width limite la taille du conteneur. Pour les images, la propriété object-fit contrôle la façon dont l'image remplit le conteneur de rapport d'aspect.
Tips & Best Practices
-
1Utilisez la propriété aspect-ratio moderne pour un code plus propre et plus simple
-
2Revenez à la technique padding-bottom pour prendre en charge les anciens navigateurs
-
3Utilisez object-fit: cover sur les images à l'intérieur des conteneurs de rapport d'aspect
-
4Définissez une largeur maximale pour empêcher que la boîte ne devienne trop grande sur les écrans larges
Related Tools
Zone de jeu CSS Flexbox
Explorateur visuel CSS Flexbox avec contrôles interactifs pour toutes les propriétés des conteneurs flexibles.
🎨 CSS & Design
Zone de jeu CSS Grid
Construteur visuel CSS Grid avec contrôles interactifs pour les colonnes de modèle, les lignes et les espaces.
🎨 CSS & Design
Testeur de conception responsive
Prévisualisez les sites Web aux points de rupture d'appareil courants avec un affichage iframe intégré.
🎨 CSS & Design
Générateur de requêtes média
Générer des requêtes média CSS avec des conditions de fonctionnalités et des points d'arrêt prédéfinis.
🎨 CSS & DesignFrequently Asked Questions
Q Qu'est-ce que l'aspect-ratio en CSS ?
Q L'aspect-ratio est-il pris en charge partout ?
Q Qu'est-ce que l'astuce padding-bottom ?
Q Comment placer du contenu à l'intérieur d'une boîte de rapport d'aspect ?
Q Puis-je utiliser aspect-ratio avec des images ?
About This Tool
Générateur de boîtes de rapport d'aspect is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.