Come sviluppatore web ti trovi spesso di fronte al dilemma di lavorare con elementi HTML che, a differenza ad esempio dell'elemento img, non hanno né una dimensione fissa né proporzioni fisse. Spesso si desidera garantire che questi oggetti si comportino in modo reattivo, ma la proporzione tra larghezza e altezza venga mantenuta. Per impostazione predefinita, i CSS non offrono una soluzione intuitiva in questo caso. Ma con l'aiuto della proprietà di riempimento verticale puoi raggiungere il tuo obiettivo.
Prendiamo come esempio le immagini di prodotti quadrate. Sebbene le immagini stesse non siano necessariamente quadrate, vorremmo visualizzarle con un rapporto di aspetto 1:1 senza alcuno sforzo aggiuntivo o distorsione, e la loro larghezza (e quindi altezza) dovrebbe adattarsi in modo responsivo. Il codice seguente semplifica l'ottenimento di questo risultato utilizzando CSS senza alcun markup aggiuntivo.:
1bc3a80de3db90cdf0535541236d95f2
con il risultato:
Ma perché funziona e come si possono creare altri rapporti d'aspetto? La chiave di tutto ciò sta nella proprietà Pad, che, specificata in valori percentuali, si basa sempre sullo stesso valore di base della proprietà Larghezza (ovvero la larghezza dell'elemento genitore). Ciò è ovvio per il riempimento-sinistra e il riempimento-destra, sorprendente per il riempimento-top e il riempimento-bottom, ma molto utile 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: