CSS: rendere responsive gli elementi multimediali

Short link

Video ed immagini sono sempre stati una sfida per quanto riguarda la loro formattazione con i CSS. Nel corso del tempo era noto che specificare dimensioni fisse non avrebbe avuto grande efficacia in tal senso a causa delle varie risoluzioni di schermo. Tuttavia, è solo recentemente che il termine responsive ha raggiunto un'effettiva implementazione grazie ad una nuova generazione di browser.

Il primo aspetto da tenere presente sono le proporzioni degli elementi da visualizzare. Sia i video che le immagini sono elementi rimpiazzati, ossia il loro contenuto viene preso da una risorsa esterna al documento.

I video, tuttavia, mantengono costante la loro qualità anche cambiando le loro dimensioni. Le immagini, al contrario, possono perdere le loro proporzioni ed apparire deformate quando si modificano le loro dimensioni.

Nel 2005, Gianluca Troiani propose di applicare dimensioni in percentuale alle immagini. In questo modo le immagini si sarebbero sempre adattate al loro contenitore. Era di fatto nato il responsive design per le immagini:


img {
	display: block;
	width: 100%;
}

Gli elementi img, object, video ed audio hanno come dichiarazione CSS predefinita il valore inline-block. All'epoca questo valore non era largamente supportato, quindi occorreva trasformare gli elementi in elementi di blocco.

Oggi si tende ad usare la dichiarazione max-width: 100% perchè permette di contenere le dimensioni dell'immagine senza costringerla sempre ad occupare tutto lo spazio disponibile:


img {
	display: block;
	max-width: 100%;
    height: auto;
}

Per i video si applica la stessa tecnica, con minori preoccupazioni in quanto questi elementi non hanno bisogno di mantenere costante e proporzionale il rapporto tra larghezza ed altezza per avere una corretta visualizzazione.

L'altezza, invece, può essere un problema sui dispositivi mobile, in quanto immagini troppo alte occuperebbero troppo spazio verticale. In questi casi una soluzione che si può tentare con i CSS è quella di impostare un'altezza per il contenitore dell'immagine e quindi usare la proprietà overflow per nascondere il contenuto in eccesso:


.image-wrapper {
	max-height: 15em;
	overflow: hidden;
}

Per le immagini di sfondo si può utilizzare la proprietà background-size:


#header {
	background-size: contain;
}

Una proprietà analoga per immagini e video è la proprietà object-fit:


img, video {
	object-fit: contain;
}

Come si può notare, esistono diverse soluzioni per il design responsive di questi elementi.