Qualche tempo fa mi sono imbattuto in un problema: avevo necessità di definire un elemento HTML che mantenesse, a qualsiasi risoluzione schermo, le medesime proporzioni, ovvero lo stesso rapporto tra larghezza e altezza. Dovendo essere responsive non potevo definirlo attribuendo esplicitamente misure in pixel ai rispettivi lati.
In apparenza, sembra che il CSS non possa venire in aiuto in un caso del genere: beh, ciò non è del tutto vero.
Le proprietà padding, infatti, quando espresse in percentuale, calcolano il proprio valore in rapporto alla larghezza dell’elemento contenitore. Ciò vale anche, sorprendentemente, per padding-top e padding-bottom.
Mettiamo assieme i pezzi. Per semplicità userò CSS inline (pratica in genere non consigliata):
<div style="width: ...">
<div style="width: 100%; padding-top: 50%; position: relative;">
<img src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
Il primo <div>, quello più esterno, è il contenitore, che avrà qualsivoglia larghezza non fissa. Il secondo <div>, quello più interno, ha le proprietà width: 100% e padding-top: 50%: misurerà dunque in larghezza il 100% della larghezza del proprio contenitore e in altezza il 50% di tale valore, mantenendo tali proporzioni a qualsiasi risoluzione schermo.
Si tratta però di un <div> interamente “riempito” dal proprio padding, incapace quindi di contenere altri oggetti al proprio interno. A meno che questi non abbiano la proprietà position: absolute che consente di “sovrapporre” un oggetto al proprio immediato contenitore.
Questa proprietà, insieme a width: 100% e height: 100%, fa sì che l’elemento più interno – in questo caso una immagine, ma vale virtualmente per qualsiasi tipo di oggetto – copra l’esatto spazio occupato dal proprio contenitore. Mantenendo quindi, a qualsiasi risoluzione schermo, le stesse proporzioni che sono state attribuite a quest’ultimo.