Creare un box HTML con rapporto larghezza/altezza prefissato

Sviluppare siti web responsive, cioè che si adattano ad ogni dispositivo, è una prerogativa necessaria e obbligatoria in un progetto che si rispetti.

Per questo motivo è sempre più importante conoscere gli strumenti giusti per rendere responsive ogni singolo elemento della nostra pagina. A tal proposito stanno nascendo sempre più proprietà CSS3 indirizzate su questo aspetto: Flexbox e Grid sono gli esempi più comuni.

In quest’ottica, trovo spesso necessario che un’immagine, o anche solamente un box HTML mantenga lo stesso rapporto larghezz/altezza, anche quando la pagina viene ridimensionata. Ora vi spiego il sistema più veloce.

Mettere in relazione altezza con larghezza

Di base nel web larghezza e altezza sono 2 parametri indipendenti tra loro. Quindi non possiamo dire al CSS “metti l’altezza uguale alla larghezza” per ottenere un box quadrato. Esiste però un “trucco” ,se così si può dire: usare il padding-top in percentuale.

Infatti, la percentuale del padding-top (ma anche padding-bottom volendo) fa riferimento alla larghezza dell’elemento padre. Sembra strano ma è così. E questa cosa permette di creare proprio una relazione tra le 2 dimensioni.

Passiamo alla pratica

Proviamo a creare quindi un box di 300x300px con rapporto quadrato (1:1). Di seguito la struttura HTML di partenza:

<!-- Primo esempio -->
<div class="ratio-box"> 
  <div class="inner-ratio-box"> 
    <div class="inner-text"> 
      <h1>Ciao Mondo!</h1> 
    </div> 
  </div> 
</div> 

<!-- Secondo esempio -->
<div class="ratio-box"> 
  <div class="inner-ratio-box"> 
    <img class="inner-img" src="img/grattacieli.jpg" alt="grattacieli"> 
  </div> 
</div>

Prima di tutto dobbiamo creare un “contenitore” che definisca la larghezza che vogliamo: può essere anche solo il classico “.container”, oppure possiamo creare un box con una larghezza definita, come in questo esempio:

.ratio-box {
  width: 300px;
}

Fatto questo, inseriamo al suo interno un altro box a cui daremo semplicemente un padding-top in percentuale a seconda del rapporto richiesto. Anche se non strettamente necessario, impostiamo anche width:0 e overflow:hidden così da evitare che il box sia più alto del richiesto o il suo contenuto strabordi.

.inner-ratio-box {
  padding-top: 100%;
  height: 0;
  overflow: hidden;
  background-color: #57BCB7;
  position: relative;
}

Di seguito una tabella che può aiutarvi nella scelta della percentuale giusta.

N.B.: Per altri rapporti potete ricavarvi la percentuale dividendo 100 per il rapporto di larghezza e moltiplicando poi il risultato per il rapporto di altezza. Se ad esempio volete un rapporto di 8:5, dovete fare questo calcolo: 100/8*5 = 62,5.

Come gestire il contenuto del box

Sicuramente vi starete chiedendo: ma se l’altezza è 0, come faccio a metterci dentro qualcosa, come ad esempio un testo o meglio ancora, un’immagine? Soprattutto perchè il contenuto di un elemento non va nel padding.

Per risolvere questo possibile problema dovete impostare position:relative al box a cui avete dato padding-top.

Create poi un ulteriore box interno con posizionamento assoluto e che occupi tutto lo spazio del box padre. Così facendo potrete inserire il testo che volete al suo interno.

.inner-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

E se voglio un’immagine?

Volendo potreste anche mettere un’immagine che “copra” tutto lo spazio a disposizione. La procedura è simile all’esempio precedente: diamo quindi all'<img> un posizionamento assoluto e occupiamo tutto lo spazio. In più però, dobbiamo settare object-fit:cover. Questo ci assicura che l’immagine copra tutto lo spazio, mantenendo le proporzioni e tagliando l’eccedente (crop).

img.inner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Può sembrare macchinoso, ma una volta capita la logica vi assicuro che è veramente semplice e lo troverete molto comodo. Soprattutto quando avete box che occupano tutta la larghezza dello schermo.