Imagen en EasySlider

[LinkLooker]

Saludos, el asunto es que tengo una variación del "EASYSLIDER", basado en Jquery...El asunto es qeu las imagenes que tienen que deslizar (cambiar cada cierto tiempo) no crecen con el contenedor que las posee.

He puesto #contslider img {width: 100%} pero nada....
y #slider img {width:100%} pero tampoco


Codigo CSS:

#contslider img { width:100%;}
#contslider{ border:solid #009933 1px; padding: 4px 4px 6px 4px; }

*///////////comienzo del slider //////////*/
img{border:none; }
pre{
display:block;
font:5px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:100%;
}


/* // image replacement */

#container{
margin:0 auto;
position:relative;
text-align:left;
width:505px;
height:100px;
background:#fff;
margin-bottom:2em;

}

#content{
position:relative;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider{


margin: 0px 0px 0px 0px;
width:505px
}


#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:614px;
height:100px;
overflow:hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#nextBtn, #slider1next{
left:696px;
}


/* numeric controls */

ol#controls{
margin:5px ;
padding:0;
height:18px;
}
ol#controls li{
margin:0 5px 0 0;
padding:0;
float:left;
list-style:none;
height:18px;
line-height:8px;
}
ol#controls li a{
float:left;
height:18px;
line-height:18px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
margin-left:10px;
/*tamaño botones numericos*/
padding:0px 10px ;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // FIN Easy Slider */


Codigo HTML:

<div id="contslider">
<div id="slider">
<ul>
<li><a href="http://www.vinculoNumero1.ve" target="_blank"><img src="2010/imagenes/01.jpg" alt="Usa el Casco" width="614" height="100" border="0" /></a></li>

<li><a href="archivos/proceso.pdf" target="_blank"><img src="2010/imagenes/02.jpg" alt="Periodo 2010-2" width="614" height="100" border="0" /></a></li>

<li><a href="http://www.vinculoNUmero3.com" target="_blank"><img src="2010/imagenes/03.jpg" alt="Estudio" width="614" height="100" border="0" /></a></li>

<li><a href="dependencias/secgral/aseuny.html" target="_blank"><img src="2010/imagenes/04.jpg" alt="Asociación" width="614" height="100" border="0" /></a></li>

<li><a href="archivos/hps/seleccionHPS.gif" target="_blank"><img src="2010/imagenes/05.jpg" alt="Carrera" width="614" height="100" border="0" /></a></li>
</ul>
</div>
</div>

[LinkLooker]

COmo veran las imagenes miden 614 px de ancho y 100px de alto, lo que quiero hacer es que cuando el contenedor (#contslider) de la imagen crezca, las imagenes que este contiene se estiren adaptandose a la nueva dimensión, por eso puse #contslider img {width: 100%}, de hecho hago lo mismo con el header y si se pone la img al 100%. Pero dentro del Slider no....


Bueno seguiré viendo, leyendo y aprendiendo.....

[dargorg]

Eso no se puede hacer, a no ser de que a cada una de las imágenes le modifiques los atributos height y width. Lo que podrías hacer es mediante javascript es calcular el tamaño del div contenedor y a partir de ahí hacer todo el proceso aunque no te lo recomiendo... es mejor que trabajes con las imágenes con su tamaño original.

Un saludo,

[crea3d]

Amigo eso ya esta resuelto en la siguiente dirección: http://www.digitalicon.es/blog/volviendo-fluido-easy-slider/

Luis Alva