Rapport aspect ratio CSS

Cet outil génère du CSS pour un ratio largeur:hauteur en utilisant soit la propriété moderne `aspect-ratio`, soit la classique astuce du padding en pourcentage. Il fournit des préréglages de ratios courants, des entrées personnalisées de largeur/hauteur (1-100), un cadre d'aperçu en direct et une sortie prête à copier. L'aperçu adapte son rendu à la méthode sélectionnée afin que vous voyiez exactement ce que chaque technique produit.

1. Cliquez sur un préréglage Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) ou saisissez Width et Height personnalisés (1-100). 2. Choisissez une Method : Modern (`aspect-ratio`) ou Padding Hack. 3. Le cadre Preview effectue le rendu du ratio avec la technique sélectionnée. 4. Cliquez sur Copy dans la carte Output pour copier le CSS généré.

Modern produit une seule ligne : `aspect-ratio: <width> / <height>;`. Padding Hack produit un `.container` avec `position: relative; width: 100%; padding-top: <height/width*100>%;` et un `.content` en position absolue qui le remplit, ce qui est la technique classique pour les environnements sans prise en charge de `aspect-ratio`. L'aperçu utilise les mêmes styles, plafonné à une largeur maximale de 400px, donc le rendu visuel correspond à la technique décrite par le CSS.