CSS  »  Articoli  »  Responsive Design 

Questa è la traduzione dell'articolo Creating Intrinsic Ratios for Video di Thierry Koblenz, pubblicato originariamente su A List Apart il 26 Maggio 2009. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Avete mai voluto ridimensionare al volo un video scalandolo come se fosse un'immagine? Usando un rapporto di dimensioni intrinseco per i video è possibile. Questa tecnica consente ai browser di determinare le dimensioni del video basandosi sulla larghezza del suo blocco contenitore. Con dimensioni intrinseche, una nuova larghezza fa scaturire automaticamente un nuovo calcolo per l'altezza, consentendo ai video di ridimensionarsi e dando ad essi la possibilità di scalare allo stesso modo delle immagini. Ecco il primo esempio.

Il concetto

L'idea è quella di creare un box con il giusto rapporto di dimensioni (per esempio 4:3 o 16:9), quindi far sì che il video all'interno del box si adatti per riempire pienamente le dimensioni del box. È così semplice.

Il trucco

La proprietà padding è la magia che ci consente di creare un box con un rapporto di dimensioni intrinseco. Ciò avviene perché imposteremo il padding in percentuale basandoci sulla larghezza del blocco contenitore.

Le regole CSS qui sotto illustrano come applicare uno stile all'elemento parente e a quello figlio per creare un "contenitore magico", ovvero un contenitore che si ridimensiona proporzionalmente in base alla larghezza del suo elemento parente. Ecco il secondo esempio.

Ed ecco il codice:

.wrapper-with-intrinsic-ratio { /* Contenitore con rapporto di dimensioni intrinseco */
	position: relative;
	padding-bottom: 20%;
	height: 0;
}

.element-to-stretch { /* elemento da adattare */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: teal;	
}

Rivediamo la dichiarazione regola per regola, iniziando dall'elemento con classe .wrapper-with-intrinsic-ratio.

position: relative

Dichiarando position: relative tutti gli elementi figli si posizioneranno in relazione al loro contenitore.

padding-bottom: 20%

Questa dichiarazione dà al box un formato specifico. Usando il valore 20% per il padding rendiamo l'altezza del box uguale al 20% della sua larghezza.

Usiamo volutamente padding-bottom invece che padding-top. Questo perché IE5 rimuove lo spazio creato con padding-top dal flusso normale. In altre parole, usando padding-top: 20% creeremo il layout che vogliamo, ma il box si comporterebbe come un elemento posizionato assolutamente, sovrapponendosi gli elementi successivi nel flusso del documento.

Altri articoli

Altre guide

Altre newsletter