Salve a tutti, ho un piccolo problema con Nivoslider e l'ottimizazione di questo su Galaxy3 in versione portrait.
Nel sito in oggetto utilizzo NivoSlider come sfondo mentre faccio sorrere il testo al di sopra.
Ho quindi inserito position:fixed al contenitore dello slider.
Per far si che le immagini coprano l'intera porzione dello schermo ho impostato width:auto e height:100% alle <img>.
Il problema è che in questo modo le foto vengono compresse e distorte all'interno dell'area dello schermo, ma questo succede solo sul galaxy mentre su iphone 3 4 e 5 il tutto viene visualizzato correttamente:
http://www.jeanclaudechiementin.com/dinomusa/
Ho notato che inserendo position:absolute al contenitore, le foto non vengono distorte ma naturalmente lo slider non rimane fisso ma scrolla (vedere le pagine interne).
HTML:
<div id="bg-nivo-slider">
<ul>
<li><img src="images/home-1.jpg" /></li>
<li><img src="images/home-2.jpg" /></li>
<li><img src="images/home-3.jpg" /></li>
<li><img src="images/home-4.jpg" /></li>
</ul>
</div>
CSS:
#bg-nivo-slider{
width:100%;
height:100%;
position:fixed;
z-index:0;
overflow:hidden;
}
.nivo-main-image, .nivoSlider img, #bg-nivo-slider img{
height:100%!important;
width:auto!important;
}
SPero che qualcuna riesca ad aiutamri perchè le
ho provate tutte, anche un codice jquery per non fare scrollare l'elemento slider di sfondo, ma l'effetto finale non era accettabile...
Rispondi quotando
