joomla - comportamento responsive div contenitore

[freetecno]

Ho uno slideshow di immagini. La lista immagini (UL, LI) � all'nterno di un DIV contenitore.
Al div contenitore � stata assegnata un'altezza (height, via css).

Ridimensionando la finestra browser, le immagini si ridimensionano di conseguenza: occupano width:100% (della viewport) mentre la loro height viene correttamente riproporzionata.
Il div contenitore, al contrario, continua ad occupare width:100% (della viewport) ma mantiene l'altezza inizialmente assegnata:
VORREI CHE L'ALTEZZA DEL CONTENITORE FOSSE RIPROPORZIONATA IN BASE A QUELLA DELL'IMMAGINE (l'immagine deve coprire il contenitore).

Insomma, poich� l'immagine restringe la sua height ma il contenitore "resta alto" (non ridefinisce la sua altezza in base al contenuto), si crea uno spazio vuoto sotto l'immagine.

Potete darmi un suggerimento? Grazie.

[lucavizzi]

Se imposti un'altezza per un elemento, il browser si attiene a quell'istruzione.

Dovresti usare una height:auto se vuoi che il div si espanda e contragga automaticamente.

[freetecno]

Grazie per aver risposto.
Naturalllmente avevo già provato con Height auto ma senza fornire una dimensione il div contenitore non risulta visibile. Anche dando height a immagini il risultato non cambia.

[freetecno]

Se tu avessi voglia di dare un' occhiata, lo slider è in testa alla homepage di www.teatrofontana.it

[fluxKami]

Se hai messo le immagini tramite <img> allora il contenitore si allarga di conseguenza.
Ti suggerisco di dare a tutte le immagini "max-width: 100%;" ed al contenitore "height: auto", in modo che l'immagine si rimpicciolisca proporzionalmente alla larghezza dello schermo senza deformarsi, mantenendo le proporzioni con tra larghezza e altezza ed in modo da alzare/abbassare il contenitore in base al contenuto. Tieni presente però che tutte le immagini, a prescindere da larghezza e altezza, devono avere le stesse proporzioni, quindi o le ritagli di conseguenza tramite photoshop oppure devi trovare una soluzione tramite codice.

[lucavizzi]

Grazie per aver risposto.
Naturalllmente avevo già provato con Height auto ma senza fornire una dimensione il div contenitore non risulta visibile. Anche dando height a immagini il risultato non cambia.

Più che "non essere visibile", il contenitore non si espande (in altezza) perché gli elementi al suo interno hanno un float oppure una position:absolute.
Esistono soluzioni per entrambe queste eventualità, prova a fare una ricerca mirata.

[freetecno]

Riassumo la questione e fornisco una sintetica descrizione della soluzione, perch� possa essere utile anche ad altri.


Parliamo di uno slideshow (tipico nella header di una pagina web).


- All'interno di un DIV contenitore e' sistemata una lista non ordinata (UL LI) delle immagini da elaborare
- l'elemento UL ha POSITION: RELATIVE
- gli elementi LI hanno POSITION: ABSOLUTE (top:0, left:0)
- all'elemento UL viene assegnata una altezza (HEIGHT).

Problema
- lo slideshow non ha un corretto comportamento responsive
- restringendo la finestra (browser), accade che le immagini modificano (correttamente) la loro dimensione; la loro HEIGHT si modifica proporzionalmente alla WIDTH; l'elemento UL, invece, mantiene l'altezza assegnata.

Togliendo la HEIGHT all'elemento UL, la sua dimensione verticale resta zero e le immagini non sono visibili; accade infatti che gli elementi LI non si espandono perche' hanno POSITION: ABSOLUTE.


Soluzione (trovata in rete)
- gli elementi LI mantengono POSITION: ABSOLUTE tranne il primo, al quale viene assegnata POSITION: RELATIVE.

Questo ha risolto il problema. Lo slideshow si comporta ora in maniera responsive.