Lista immagini proporzionate, con bande nere

[pictor]

Domanda semplice

Ho una lista disposta (con float:left) su una riga.
Ha N elementi (in questo caso N=5) e la loro larghezza è proporzionale alla larghezza disponibile (100% diviso 5).
Le immagini hanno tutte proporzioni diverse.

Come faccio a farle proporzionare automaticamente, secondo proporzioni prefissate?

Ho provato con

ul#gallery {
  height: 130px;
  width: 100%;
}

ul#gallery li {
  background-color: #000;
  float: left;
  width: 19%;  /* 100% diviso 5 (circa) */
}

ul#gallery img {
  height: 100%;
}

Non funziona però... almeno, funziona solo se l'altezza è maggiore della larghezza
le immagini devono adattarsi alla larghezza o all'altezza del[*] che le contengono, senza perdere però le proporzioni.

Sapete aiutarmi?

[Mich_]

Prova a togliere tutte le definizioni di altezza (sia quella nel #gallery che in #gallery img).
Non ho provato, ma i "sacri testi" dicono che la proporzione si mantiene se in una immagine viene definita solo una dimensione.

Poi potrebbe essere necessario un clear, ma questo e` un problema diverso.

[Mauro Accornero]

Se definisci solo una larghezza il css mantiene la proporzione dell'immagine, se per esempio setti la larghezza a 100px tutte le immagini avranno questa larghezza, se la loro altezza varia verrà riscalta in proporzione, quindi non avrai tutte immagini di uguale dimensione. Se deideri mantenere tutti le immagini ad una dimensione fissa hai due possibilità:
1)setti altezza e larghezza all'immagine ma verrà ridimensionata dal css perdendo di qualità
2) per ogni immagine crei un div che le contenga e setti altezza e larghezza fisse con un overflow:hidden; questo sistema funzionerà come maschera dove la zona visibile dell'immagine sarà uguale alle dimensioni del div nell'angolo superiore sinistro. Se vuoi riposizionare l'immagine diversamente puoi usare il position relative.

[pictor]

Originariamente inviato da Mauro Accornero
Se definisci solo una larghezza il css mantiene la proporzione dell'immagine, se per esempio setti la larghezza a 100px tutte le immagini avranno questa larghezza, se la loro altezza varia verrà riscalta in proporzione, quindi non avrai tutte immagini di uguale dimensione. Se deideri mantenere tutti le immagini ad una dimensione fissa hai due possibilità:
1)setti altezza e larghezza all'immagine ma verrà ridimensionata dal css perdendo di qualità
2) per ogni immagine crei un div che le contenga e setti altezza e larghezza fisse con un overflow:hidden; questo sistema funzionerà come maschera dove la zona visibile dell'immagine sarà uguale alle dimensioni del div nell'angolo superiore sinistro. Se vuoi riposizionare l'immagine diversamente puoi usare il position relative.

Ecco io vorrei fare una cosa appunto dove specifico le dimensioni del div ([*] in questo caso) dove inserisco le immagini. E il contenitore deve fare da limitatore.
Poi l'immagine dovrebbe adattarsi, in altezza o in larghezza, alle dimensioni del contenitore, mantenendo le proporzioni.
Quindi se è più larga l'immagine si imposta alla larghezza 100% del contenitore (e l'altezza si adeguerà di conseguenza); se è più alta l'immagine prenderà il 100% dell'altezza del contenitore, e si adattarà proporzionalmente in larghezza (che sarà minore o uguale al 100% della larghezza).

Non è un grosso problema la perdita di qualità.

Altrimenti stavo pensando di fare un resample ridimensionato in PHP con GD2, ma se me lo fa CSS preferisco: risparmio tempo e risorse.

Se possibile però eviterei l'overflow:hidden. L'immagine si deve adattare a container.

Che dite?

[Mauro Accornero]

Sicuramente se ridimensioni le immagini con php ottieni una qualità maggiore a mio parere e puoi gestire meglio una dimensione standard ma non so fino a che punto ti convenga se tieni le dimensioni delle immagini in percentuale, considera che la risoluzione del monitor può variare e le immagini potrebbero dover andare a capo.
Ho notato che nel css hai height:130px; per l'ul quindi considera che l'altezza al 100% dell'immagine sarà di 130 px se vuoi che si allunghino maggiormente non settare un altezza, inoltre ti consiglierei di resettare margini e padding che ti evitano di avere valori di default che potrebbero complicare le cose. Prova a sostituire height:100% per l'immagine con width 100%, essendo dentro li sarà larga il 19% di ul. Inoltre valuta di utilizzare un display:inline in li al posto di float che ti crea molti meno problemi nella gestione del flusso all'interno del layout.

[pictor]

Originariamente inviato da Mauro Accornero
Sicuramente se ridimensioni le immagini con php ottieni una qualità maggiore a mio parere e puoi gestire meglio una dimensione standard ma non so fino a che punto ti convenga se tieni le dimensioni delle immagini in percentuale, considera che la risoluzione del monitor può variare e le immagini potrebbero dover andare a capo.

Il sito su cui devo fare questa cosa non è molto CSS oriented. Ha la struttura a tabelle e larghezza fissa.

Quindi non è un grosso problema la risoluzione del monitor. Solo che volevo fare qualcosa che si adattasse in automatico, nel caso io voglia allargare le dimensioni in futuro.

Ho notato che nel css hai height:130px; per l'ul quindi considera che l'altezza al 100% dell'immagine sarà di 130 px se vuoi che si allunghino maggiormente non settare un altezza,

No, voglio che l'altezza massima sia 130px per le immagini (che prenderanno una larghezza proporzionale a quell'altezza). Stessa cosa per la larghezza. Non voglio che superino il 100% del contenitore (che a sua volta è il 19% della larghezza totale, l' <ul>).

inoltre ti consiglierei di resettare margini e padding che ti evitano di avere valori di default che potrebbero complicare le cose.

Sì quelli li tolgo e ci lavoro dopo, applicandoli al contenitore piuttosto.

Prova a sostituire height:100% per l'immagine con width 100%, essendo dentro li sarà larga il 19% di ul.

Mmmmh... però in questo modo se l'altezza è più di 130 px l'immagine sborderà o redimensionerà il contenitore (almeno su IE). Invece l'altezza dev'essere il 100% del contenitore.

Il mio problema è che vorrei impostare width:100% ed height:100% all'immagine, ma in modo che la stessa mantenga le proporzioni, e si adatti, in larghezza o altezza, alla dimensione 'maggiore'.

Forse con max-width e max-height potrei risolvere?

Inoltre valuta di utilizzare un display:inline in li al posto di float che ti crea molti meno problemi nella gestione del flusso all'interno del layout.

Effettivamente ha più senso!
Non ci avevo pensato...
Grazie proverò!

[Mauro Accornero]

Si puoi usare max height e max width ma su ie vecchi non funziona, per l'immagine potresti settare solo height a 130px e l'immagine manterrà la proporzione se ometti width questo viene calcolato in proporzione se inserisci un valore per entrambi l'immagine viene distorta, io farei un tentativo solo con height a 130px nel caso si lavora sul width.

[Mich_]

Aggiungo i miei due cent.

Se ho capito giusto (ma questo differisce da quanto avevo capito all'inizio), tu hai dei contenitori fissi sia in larghezza che in altezza, e dentro questi vuoi infilare delle miniature che devono starci dentro senza deformarsi.
Quindi al momento parto da questo problema ed analizzo solo questo.

Puoi provare definendo max-height:100% e max-width:100%, ma non credo che la cosa sia molto valida in termini di compatibilita` dei vari browser.

La cosa corretta (dal punto di vista del CSS) sarebbe:
- se l'immagine e` piu` alta che larga (in proporzione allo spazio da occupare), definisci height:100% e non definisci width;
- se l'immagine e` piu` larga che alta, definisci width: 100% e non definisci height.

Quindi se tu riesci a determinare lato server quale e` la condizione e definisci solo l'attributo corretto hai risolto; questo ti fa lavorare il CSS nella sua funzionalita` e delega al PHP una piccola parte del lavoro.
In questi casi conviene usare i CSS in linea; esempio
[img]...[/img]
dove la stringa viene inserita dal PHP e viene scritto height o width a seconda del caso.

Inoltre valuta di utilizzare un display:inline in li al posto di float che ti crea molti meno problemi nella gestione del flusso all'interno del layout.

Non credo sia corretto o quello che serve: un oggetto inline non e` dimensionabile (non puo` avere width e height - tranne in IE quirks mode): per affiancare oggetti block, si deve usare il float (oppure il posizionamento, che pero` da` spesso problemi di sovrapposizioni).

[Mauro Accornero]

L'inline non può avere dimensione ma l'img è un elemento rimpiazzato ha quindi dimensioni proprie, il display inline serve solo a gestire li, l'img avrà i suoi parametri che gestiscono l'immagine all'interno di li per evitare l'eredità dei parametri di li.

In realtà per una struttura del genere sarebbe oppurtuno usare i div (a meno che non stiamo parlando di un menu), se si usassero i div allora procederei con il float gestito con il clear di un elemento fratello e sottostante al contenitore o un overflow hidden sul contenitore.

Penso anche che la tua analisi sia corretta, e si potrebbero creare due classi una per la larghezza e una per l'altezza, per sapere le dimensioni dell'immagine si potrebbe utilizzare javascript e applicare le classi agli elementi desiderati senza stare a scomodare php