Rapporto d’aspetto dei CSS

Questo strumento genera CSS per un rapporto larghezza:altezza utilizzando la moderna proprietà `aspect-ratio` oppure il classico hack del padding percentuale. Fornisce preset di rapporti comuni, input personalizzati di larghezza/altezza (1-100), una casella di anteprima dal vivo e output pronto da copiare. L'anteprima adatta il rendering al metodo selezionato, in modo da vedere esattamente cosa produce ciascuna tecnica.

1. Fai clic su un preset Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) oppure inserisci Width e Height personalizzati (1-100). 2. Scegli un Method: Modern (`aspect-ratio`) o Padding Hack. 3. La casella Preview renderizza il rapporto utilizzando la tecnica selezionata. 4. Fai clic su Copy nella scheda Output per copiare il CSS generato.

Modern genera una singola riga: `aspect-ratio: <width> / <height>;`. Padding Hack genera un `.container` con `position: relative; width: 100%; padding-top: <height/width*100>%;` e un `.content` a posizione assoluta che lo riempie, ovvero la tecnica legacy per ambienti senza supporto a `aspect-ratio`. L'anteprima usa gli stessi stili, limitati a una larghezza massima di 400px, quindi il risultato visivo corrisponde alla tecnica descritta dal CSS.