In qualità di sviluppatore web, si è spesso imbarazzati a lavorare con elementi HTML che da soli, a differenza dell'elemento img, ad esempio, non hanno né una dimensione fissa né un rapporto di aspetto fisso. Spesso si desidera ottenere che questi oggetti si comportino in modo reattivo, ma viene mantenuta la proporzione tra larghezza e altezza. CSS non offre una soluzione intuitiva qui per impostazione predefinita. Ma con l'aiuto della proprietà di imbottitura verticale puoi raggiungere il tuo obiettivo.
Prendiamo l'esempio quotidiano di immagini di articoli quadrati, la cui grafica non è necessariamente quadrata, ma vorremmo visualizzarli senza sforzi aggiuntivi e soprattutto senza distorsioni con il rapporto di aspetto 1: 1, per cui la loro larghezza (e quindi anche altezza) cambia in modo reattivo dovrebbero. Con il codice seguente è molto facile farlo senza markup aggiuntivo con l'aiuto dei CSS:
1bc3a80de3db90cdf0535541236d95f2
con il risultato
Ma perché funziona e come si possono creare altri rapporti d'aspetto? La chiave di ciò risiede nella proprietà padding, che, data in valori percentuali, è sempre basata sullo stesso valore di base della proprietà Width (ovvero la larghezza dell'elemento genitore). Con padding-left e padding-right questo è ovvio, con padding-top e padding-bottom sorprendenti, ma molto utili in questo caso.
Se desideri un rapporto di aspetto di 16: 9, ad esempio, scegli i valori width: 100%; padding-bottom: 56,25%;. Una proporzione che tiene conto della sezione aurea è la larghezza: 100%; imbottitura inferiore: 61,81%; realizzabile.
Con l'aiuto di calc puoi specificare direttamente le proporzioni, ad esempio per 16: 9 con padding-bottom: calc (1 / (16/9) * 100%). Se l'elemento è costituito da ulteriori elementi nidificati, l'elemento figlio è posizionato in modo assoluto per compensare il riempimento dell'elemento genitore:
1bc3a80de3db90cdf0535541236d95f2
Questo porta al seguente risultato: