CSS: layout delle immagini

  • CSS
  • Gabriele Romanato

Nel modello visuale dei CSS le immagini sono degli elementi rimpiazzati. Per elementi rimpiazzati si intendono quegli elementi il cui contenuto viene sostituito (rimpiazzato) dal contenuto di una risorsa esterna alla pagina. Nel caso delle immagini il contenuto viene inserito nella pagina tramite l'attributo src dell'elemento img. Le specifiche CSS (2.1) non definiscono esattamente il layout delle immagini, limitandosi semplicemente ad attribuire loro il ruolo di elementi inline-block (display: inline-block). Ma le immagini si comportano in modo peculiare quando vengono inserite nel contesto di una pagina. Vediamo come.

Immagini inline

Per impostazione predefinita le immagini si dispongono sulla stessa riga del testo. Esse sono quindi suscettibili alle proprietà vertical-align e line-height. Per esempio, per allineare verticalmente un'immagine inline e centrarla col testo possiamo scrivere:


img {
  vertical-align: middle;
}

Altre proprietà applicabili alle immagini inline sono:

  • margin-left, margin-right
  • padding
  • bordi

I margini applicabili rispettano le regole di formattazione CSS per un contesto inline. Essi possono solo essere orizzontali. Per l'allineamento verticale si può anche usare line-height.

Inoltre la proprietà line-height definisce anche l'altezza complessiva del blocco inline delle immagini.

Immagini di blocco

Le immagini di blocco non sono altro che immagini a cui viene applicata la dichiarazione display: block o che vengono trasformate in elementi di blocco dall'uso di determinate proprietà CSS (come float e position).

Una peculiarità interessante di questo tipo di layout è che si possono realizzare immagini fluide che si adattano alle dimensioni del loro contenitore. Per far ciò si utilizzano valori in percentuale. Esempio:


#container {
  width: 300px;
}

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

In questo caso l'immagine avrà la stessa larghezza del suo contenitore. Alle immagini di blocco si applicano tutte le proprietà CSS relative ad un contesto di formattazione di blocco.

Torna su