Css dimensione immagini slideshow

[pegaso22]

Ciao a tutti,
è da poco che uso CSS per l'impaginazione, ho un problema penso banale.

Sto creando un banner con all'interno 5 foto con effetto dissolvenza, e fin qui tutto ok!!
Il problema è che non riesco a impostare la dimensione dell'immagine al 100% dell'area (div).
Praticamente me le mette al 100% ma le mozza, quindi prende una porzione pari al 100% ma non adatta l'immagine.

Questo il codice:

CSS

.contenitoreprincipale{
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-right: 1%;
  margin-left: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
  max-width: 100%; 
  text-align: center;
  background-color: #ffffff;
  diplay: block;
  position: relative;
}


/*style slider*/
#slider{
	margin:0;
	padding:0;
	float:left;
	width:2560px;
	height:590px;

}


#slider ul{
	margin:0;
	padding:0;
	float:left;
	position:relative;
}


#slider ul li{
	margin:0;
	padding:0;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	-o-animation-name:slides_animation;
	-o-animation-duration:25s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
	-o-animation-delay: 0;
	-o-animation-play-state: running;
	-o-animation-fill-mode: forwards;
	-webkit-animation-name:slides_animation;
	-webkit-animation-duration:25s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name:slides_animation;
	-moz-animation-duration:25s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	animation-name:slides_animation;
	animation-duration:25s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
#slider ul li:nth-child(2){-o-animation-delay:5s;-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s}
#slider ul li:nth-child(3){-o-animation-delay:10s;-webkit-animation-delay:10s;-moz-animation-delay:10s;animation-delay:10s}
#slider ul li:nth-child(4){-o-animation-delay:15s;-webkit-animation-delay:15s;-moz-animation-delay:15s;animation-delay:15s}
#slider ul li:nth-child(5){-o-animation-delay:20s;-webkit-animation-delay:20s;-moz-animation-delay:20s;animation-delay:20s}
#slider ul li img{display:inline-block}


/*animation css3*/
@-o-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}
@-webkit-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}


@-moz-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}


@keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}


/* IMMAGINE HOME */


.fotografia {
margin: 0;
width:100%;
height:100%;
overflow: hidden;
float: center;
position: relative;
font-family: Arial;
font-weight: bold;
background-color: #ff22dd;
}


.fotografia .didascalia{
display: block;
position: absolute;
bottom: 3%;
padding: 0px;
margin: 0px;
border: 0px;
width: 100%;
float: center;
color: #ffffff;
}


.sottodidascalia{
display: block;
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
border: 0px;
width: 100%;
float: center;
color: #6C3F22;
font-family: Arial;
font-weight: bold;
background-color: #ff22dd;
}


@media (max-width: 640px) 
{ 
.didascalia {font-size:1.5rem;} 
} 
@media (min-width: 641px)
{ 
.sottodidascalia {font-size:0.50rem;} 
} 


@media (min-width: 641px)
{ 
.didascalia {font-size:2.25rem;} 
}
@media (min-width: 641px)
{ 
.sottodidascalia {font-size:1.25rem;} 
}  


@media (min-width:960px) 
{ 
.didascalia {font-size:3.0rem;} 
} 
@media (min-width:960px) 
{ 
.sottodidascalia {font-size:2.0rem;} 
} 


@media (min-width:1100px) 
{ 
.didascalia {font-size:3.75rem;} 
}
@media (min-width:1100px) 
{ 
.sottodidascalia {font-size:1.6rem;} 
} 
/* FINE IMMAGINE HOME */

HTML

<div class="contenitoreprincipale">
<div class="fotografia">
	<div id="slider">
		<ul>
			<li><img src="default1.jpg"></li>
			<li><img src="default2.jpg"></li>
			<li><img src="default3.jpg"></li>
			<li><img src="default4.jpg"></li>
			<li><img src="default5.jpg"></li>
		</ul>
	</div>
</div>
</div>

Non capisco cosa sto sbagliando.

Fatemi sapere.

Grazie mille.

[pegaso22]

Qualcuno ha una soluzione?
Non riesco a sistemare...

[Prill]

non vedo impostata per le immagini alcuna dimensione nel css, e, a meno che il ridimensionamento non sia regolato nello script della gallery, si dovrebbe invece avere un width:100%; e un height:auto.
Sicuro di volere uno slider di 2500 e rotti pixel? hai anche dei float:center da eliminare

[pegaso22]

Praticamente lo slider deve riempire tutto lo schermo in larghezza e ovviamente in proporzione in altezza.
Ho impostato a 2560 perchè è la dimensione massima della foto... dopo 1000 tentativi.

Come devo modificare?