Gallerie di miniature non omogenee
Mercoledì 4 Aprile 2007 - 09:25
di Alessandro Fulciniti
Trovo che le miniature siano un modo molto accattivante per presentare in maniera efficace le gallerie di immagini. I problemi sorgono però nel momento in cui vogliamo sistemare miniature di dimensioni diverse o con differente orientamento.
A questo punto si presentano tre soluzioni. La prima, e la meno pratica, è aprire il vostro programma di grafica preferito e procedere a ridimensionare e/o aggiungere spazio bianco per far si che tutte le miniature abbiano alla fine
la stessa dimensione, per poi usare una soluzione che sia adatta per miniature delle stesse dimensioni (tipo questa presentata nella serie usare il background).
La seconda: centrare sia verticalmente che orizzontalmente le miniature, così da consentire differenti misure… magari con una piccola cornice attorno, un po’ com’è stato presentato nell’articolo Miniature centrate con i CSS
(qui l’esempio).
La terza soluzione viene presentata nel recentissimo Image gallery that doesnt fall apart di Emanuel Blagonic: si tratta semplicemente di assegnare le dimensioni ai contenitori delle immagini (tipicamente link, div o list-item) e far sì che il contenuto in eccesso venga tagliato grazie alla proprietà overflow. Semplice ed efficace.
Commenti
1
Nella pagina in firma uso un approccio diverso ma con risultati simili:
Il contenitore è a grandezza fissa e uso un’immagine di fondo centrata che viene ovviamente tagliata se più grande del contenitore.
2
Ho lo stesso problema sul mio sito… per ora ho risolto con le cornici di diverso colore in base al sesso.. ma mi sa che mi studio l’articolo di html.it…
grazie!!
3
forse è una buona soluzione dal punto di vista dell’implementazione, ma credo che presenti un grosso problema dal punto di vista della presentazione: ridurre a proporzioni fisse immagini “varie” significa rischiare di tagliare fuori dalla thumbnail dettagli che rendono interessante la foto.
soprattutto considerando che una delle regole base della fotografia è di non tenere il soggetto della foto al centro dell’immagine è una forzatura che rende la vita dello sviluppatore molto più comoda, ma rischia di presentare il “prodotto” in maniera sbagliata…
Marcello
4
Ho sempre utilizzato la terza soluzione, perché trovo che sia quella più sbrigativa e meno “impegnativa”
# - postato da Nattevandring - 04 Aprile 2007 - 11:39
5
Andrea, ho escluso a priori di citare una soluzione come la tua tra le possibili per un semplice motivo: le immagini non decorative ma con contenuto visuale effettivo andrebbero sempre specificate con il tag
e non tramite sfondi CSS. Che succede se i CSS sono disabilitati? E per la stampa?
Marcello, in effetti il problema dell’overflow è proprio quello, a volte per questioni di resa non è possibile adottarlo…
# - postato da Alessandro Fulciniti - 04 Aprile 2007 - 19:01
6
Colpito e affondato. :-)
Rimedierò.
7
ma io la terza soluzione non l’ho capita!!:-(
Chi me la spiega?!# - postato da fra - 17 Aprile 2007 - 23:35
8
uhm.. la terza mi sembra un pò precaria, meglio la seconda, non si rischia di tagliare parti importanti..