La proprietà proporzioni CSS

La proprietà CSS che consente di mantenere la spaziatura nei layout adattabili.

Una Kravets

Proporzioni

Le proporzioni vengono espresse più comunemente come due numeri interi e due punti nelle dimensioni di: larghezza:altezza o x:y. Le proporzioni più comuni per la fotografia sono 4:3 e 3:2, mentre i video e le fotocamere di consumo più recenti tendono ad avere proporzioni 16:9.

Con l'avvento del design responsivo, il mantenimento delle proporzioni è diventato sempre più importante per gli sviluppatori web, soprattutto perché le dimensioni delle immagini differiscono e le dimensioni degli elementi cambiano in base allo spazio disponibile.

Ecco alcuni esempi di situazioni in cui il mantenimento delle proporzioni diventa importante:

• Creazione di iframe adattabili, in cui la larghezza è pari al 100% di quella del contenitore e l'altezza deve rimanere un rapporto specifico del viewport
• Creazione di contenitori segnaposto intrinseci per immagini, video e incorporamenti per evitare il riposizionamento quando gli elementi vengono caricati e occupano spazio
• Creare uno spazio uniforme e reattivo per visualizzazioni interattive dei dati o animazioni SVG
• Creazione di uno spazio uniforme e reattivo per componenti multi-elemento come schede o date del calendario
• Creazione di uno spazio uniforme e adattabile per più immagini di dimensioni diverse (può essere utilizzato insieme a object-fit)

Object-fit

La definizione di un formato ci aiuta a dimensionare i contenuti multimediali in un contesto reattivo. Un altro strumento in questo bucket è la proprietà object-fit, che consente agli utenti di descrivere in che modo un oggetto (ad esempio un'immagine) all'interno di un blocco deve riempire il blocco:

I valori initial e fill regolano nuovamente l'immagine per riempire lo spazio. Nel nostro esempio, ciò fa sì che l'immagine venga schiacciata e sfocata, poiché i pixel vengono riaggiustati. Non è l'ideale. object-fit: cover utilizza la dimensione più piccola dell'immagine per riempire lo spazio e la ritaglia in base a questa dimensione. Esegue lo zoom avanti al limite inferiore. object-fit: contain garantisce che l'intera immagine sia sempre visibile, quindi è l'opposto di cover, in cui viene presa la dimensione del confine più grande (nel nostro esempio sopra è la larghezza) e l'immagine viene ridimensionata per mantenere le proporzioni intrinseche e adattarsi allo spazio. La custodia object-fit: none mostra l'immagine ritagliata al centro (posizione predefinita dell'oggetto) nelle sue dimensioni naturali.

object-fit: cover tende a funzionare nella maggior parte delle situazioni per garantire un'interfaccia uniforme quando si ha a che fare con immagini di dimensioni diverse, tuttavia in questo modo si perdono informazioni (l'immagine viene ritagliata sui bordi più lunghi).

Se questi dettagli sono importanti (ad esempio, quando si lavora con una composizione piatta di prodotti di bellezza), il ritaglio di contenuti importanti non è accettabile. Lo scenario ideale sarebbe quello di immagini adattabili di dimensioni variabili che si adattino allo spazio della UI senza ritagliarsi.

Il vecchio trucco: mantenere le proporzioni con padding-top

Per renderli più reattivi, possiamo utilizzare le proporzioni. Ciò ci consente di impostare una dimensione specifica del rapporto e basare il resto dei contenuti multimediali su un asse individuale (altezza o larghezza).

Una soluzione cross-browser attualmente ben accettata per mantenere le proporzioni in base alla larghezza di un'immagine è nota come "Padding-Top Hack". Questa soluzione richiede un container principale e un container secondario posizionato in modo assoluto. Si calcola quindi il formato come percentuale da impostare come padding-top. Ad esempio:

• Proporzioni 1:1 = 1 / 1 = 1 = padding-top: 100%
• Proporzioni 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Proporzioni 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Proporzioni 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Ora che abbiamo identificato il valore delle proporzioni, possiamo applicarlo al contenitore principale. Considera l'esempio seguente:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Potremmo quindi scrivere il seguente CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Mantenimento delle proporzioni con aspect-ratio

Purtroppo, il calcolo di questi valori padding-top non è molto intuitivo e richiede un overhead e un posizionamento aggiuntivi. Con la nuova proprietà CSS aspect-ratio, il linguaggio per mantenere le proporzioni è molto più chiaro.

Con lo stesso markup, possiamo sostituire padding-top: 56.25% con aspect-ratio: 16 / 9, impostando aspect-ratio su un rapporto specificato di width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

L'utilizzo di aspect-ratio anziché padding-top è molto più chiaro e non modifica la proprietà di spaziatura interna per fare qualcosa al di fuori del suo ambito abituale.

Questa nuova proprietà aggiunge anche la possibilità di impostare le proporzioni su auto, dove "gli elementi sostituiti con proporzioni intrinseche utilizzano queste proporzioni; altrimenti la casella non ha proporzioni preferite". Se vengono specificati insieme sia auto che <ratio>, le proporzioni preferite sono il rapporto specificato di width diviso per height, a meno che non si tratti di un elemento sostituito con proporzioni intrinseche, nel qual caso vengono utilizzate queste ultime.

Esempio: coerenza in una griglia

Funziona molto bene anche con i meccanismi di layout CSS come CSS Grid e Flexbox. Considera un elenco con elementi secondari per i quali vuoi mantenere proporzioni 1:1, ad esempio una griglia di icone di sponsor:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Esempio: impedire lo spostamento del layout

Un'altra ottima funzionalità di aspect-ratio è la possibilità di creare uno spazio segnaposto per evitare lo spostamento cumulativo del layout e offrire Web Vitals migliori. In questo primo esempio, il caricamento di un asset da un'API come Unsplash crea uno spostamento del layout al termine del caricamento dei contenuti multimediali.

L'utilizzo di aspect-ratio, invece, crea un segnaposto per evitare questo spostamento del layout:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Suggerimento bonus: attributi immagine per le proporzioni

Un altro modo per impostare le proporzioni di un'immagine è tramite gli attributi image. Se conosci in anticipo le dimensioni dell'immagine, è una best practice impostarle come width e height.

Per il nostro esempio precedente, sapendo che le dimensioni sono 800 x 600 px, il markup dell'immagine sarà: <img src="image.jpg" alt="..." width="800" height="600">. Se l'immagine inviata ha le stesse proporzioni, ma non necessariamente gli stessi valori esatti in pixel, potremmo comunque utilizzare i valori degli attributi immagine per impostare le proporzioni, in combinazione con uno stile di width: 100%, in modo che l'immagine occupi lo spazio corretto. Nel complesso, l'aspetto sarà il seguente:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Alla fine, l'effetto è lo stesso dell'impostazione di aspect-ratio sull'immagine tramite CSS e lo spostamento cumulativo del layout viene evitato (vedi la demo su Codepen).

Conclusione

Con la nuova proprietà CSS aspect-ratio, disponibile su più browser moderni, mantenere le proporzioni corrette nei contenitori di contenuti multimediali e layout diventa un po' più semplice.

Foto di Amy Shamblen e Lionel Gustave tramite Unsplash.