CSS: galleria di immagini fluida

Una galleria di immagini fluida realizzata con i CSS è semplicemente una galleria in cui le dimensioni degli elementi vengono specificate in percentuale. Grazie a questo accorgimento possiamo realizzare una galleria di immagini che si adatta a qualsiasi risoluzione di schermo senza problemi. Come vedremo, è estremamente semplice realizzare una galleria di immagini di questo tipo.

Per la nostra marcatura scegliamo di utilizzare una lista non ordinata che andrà a contenere la galleria e i suoi elementi:

<ul id="gallery">

	<li><img src="1.jpg" alt="Immagine 1" />
		<p>Immagine 1</p>
	</li>
	
	<!-- altre immagini -->
</ul>

Ogni immagine avrà anche una sua didascalia contenuta in un paragrafo di testo. Vogliamo che le immagini vengano visualizzate su righe diverse a due a due. Per questo motivo sfruttiamo una caratteristica degli elementi flottati: quando su una stessa riga non c'è spazio per ospitare tutti i float, essi vengono spinti sulla riga sottostante. Per far ciò specificheremo una larghezza sulle voci di lista tale da far si che le immagini vengano visualizzate a due a due:

#gallery {
	margin: 0 auto;
	padding: 0;
	width: 40%;
	list-style: none;
	overflow: hidden;
}

#gallery li {
	width: 48%;
	float: left;
	padding-bottom: 0.5em;
	margin-right: 0.3em;
}

#gallery li img {
	display: block;
	width: 100%;
}

#gallery li p {
	margin: 0;
	padding: 0.3em 0 0 0;
	font-style: italic;
}

I benefici delle dimensioni in percentuale si apprezzano quando cambiamo la dimensione della finestra del browser, come mostrato nella seguente immagine.

Potete vedere l'esempio finale in questa pagina.