Creare un box HTML con rapporto larghezza/altezza prefissato

Impariamo come creare box HTML che mantengano il rapporto tra larghezza e altezza, anche quando questo viene ridimensionato.

16 Dicembre 2019 Gianni Burei pillole formative

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.

Ancora nessun commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.