Calcolatore di proporzioni CSS per padding-top responsive

Inserisca dimensioni positive, per esempio 16 e 9, e otterrà una percentuale pronta da copiare. È utile per mantenere fogli di stile meno recenti, creare soluzioni di compatibilità o generare contenitori multimediali da dimensioni archiviate. Il calcolo è deterministico, non conserva dati e restituisce lo stesso risultato nel browser e tramite API.

Converta le dimensioni in spazio verticale responsive

In CSS, il padding verticale espresso in percentuale viene calcolato rispetto alla larghezza del blocco contenitore. Questo comportamento consente di riservare altezza prima del caricamento di un’immagine, un video, un iframe o un altro elemento incorporato. Il calcolatore divide l’altezza indicata per la larghezza, moltiplica il risultato per cento e aggiunge il simbolo di percentuale. Le note dimensioni panoramiche 16 per 9 producono quindi un valore utilizzabile direttamente in una dichiarazione padding-top. Le misure non devono essere necessariamente in pixel né descrivere una risorsa grande. Devono soltanto usare la stessa unità, perché conta la loro proporzione. Una risorsa 1600 per 900, una miniatura 160 per 90 e un riquadro 16 per 9 riservano lo stesso spazio relativo. Inserisca numeri positivi e finiti in entrambi i campi; valori mancanti, nulli, negativi o non numerici vengono rifiutati, così non si genera CSS fuorviante o inutilizzabile.

Applichi la percentuale come soluzione CSS alternativa

La stringa calcolata è destinata al tradizionale schema del riquadro a proporzioni intrinseche. Applichi la percentuale al padding-top di un contenitore, imposti position: relative e posizioni in modo assoluto l’elemento figlio affinché riempia l’area riservata. Il contenitore segue così la larghezza disponibile, mentre il padding verticale mantiene la proporzione richiesta. Il CSS moderno offre la proprietà aspect-ratio, in genere più chiara per il codice nuovo, ma i riquadri basati sul padding restano utili nei fogli di stile meno recenti, nelle soluzioni di compatibilità, nei frammenti generati e nei progetti che hanno già adottato questa tecnica. Consideri il risultato come testo CSS, non come un nuovo rapporto. Se la sorgente ha larghezza 4 e altezza 3, mantenga quest’ordine; invertirlo crea intenzionalmente un riquadro verticale. Lo strumento non analizza file e non deduce l’orientamento: esegue soltanto la conversione esplicita e prevedibile.

Scelga le dimensioni e valuti la precisione

Usi larghezza e altezza intrinseche quando il contenitore deve corrispondere a una risorsa reale, oppure dimensioni di progetto per riservare uno spazio pianificato. Sono ammessi valori grandi purché positivi e finiti, ma ridurre entrambi dello stesso fattore non modifica il risultato. Sono supportate anche misure decimali, utili quando la proporzione deriva da rilevazioni di layout invece che da dimensioni multimediali intere. Il risultato viene formattato come percentuale compatta, conservando una precisione significativa adatta ai normali layout CSS. I browser possono arrotondare i subpixel a determinate larghezze della finestra; pertanto una percentuale matematicamente precisa non garantisce che ogni bordo coincida con un pixel fisico intero. È un normale comportamento del layout, non una variazione della proporzione. Quando possibile, dichiari aspect-ratio come regola principale e usi il padding calcolato soltanto come alternativa. Tramite API, ogni richiesta deterministica costa $0.002; il browser esegue localmente lo stesso calcolo puro.