Crear slider al 100% de width de la página

[madman_18]

Hola a todos!

Creo que irá aqui la entrada pero si no lo es movedlo porque no sé si iría en jQuery o aquí en Css :D

Veréis, tengo que diseñar una web nueva y se me ha ocurrido hacer un slider al 100% del width de la página.

Un tipo a lo que podéis ver aquí http://www.hiapp.me/contents/

Pero no sé cómo hacer que la imagen siempre esté al 100% del ancho, la imagen que usa esa web por ejemplo son 1600 x 740 px y ahora mismo estoy viendola en una resolución de 1920 y mantiene el aspecto.

¿Cómo podría hacerse? Se encarga la librería de jQuery o es por alguna propiedad Css.

Gracias por la ayuda!

[alejandromaringomez]

¡Hola madman_18! ,
Verás, yo estoy diseñando una web, en crear un slider tengo poca experiencia con jquery, pero te puedo guiar por css a la hora de div y tal...

para emperzar vamos a crear la estructura en html que sería:

<div id="slider">
<div id="slide_1">
<img src="pixel_trans.png" style="background-image: url('imagen_de_este_slide.loquesea');" border="0">
</div>
</div>

Y te preguntarás... ¿Y porque hacemos la imagen así?, Muy sencillo, para que la imagen se ajuste mejor a las pantallas, y de hecho como habrás comprobado hemos añadido incluso una capa de protección, será una imagen de 1x1 que sea transparente, ahora vamos con el css

#slider {
height: 350px;
width: 100%;
}
#slider img {
background-color: #ccc;
bacground-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 350px;
width: 100%;
}

Prueba a ver el codigo, la verdad que lo estoy haciendo para ti, probaré yo también pero debe funcionar

[madman_18]

Iniciado por alejandromaringomez

¡Hola madman_18! ,
Verás, yo estoy diseñando una web, en crear un slider tengo poca experiencia con jquery, pero te puedo guiar por css a la hora de div y tal...

para emperzar vamos a crear la estructura en html que sería:

<div id="slider">
<div id="slide_1">
<img src="pixel_trans.png" style="background-image: url('imagen_de_este_slide.loquesea');" border="0">
</div>
</div>

Y te preguntarás... ¿Y porque hacemos la imagen así?, Muy sencillo, para que la imagen se ajuste mejor a las pantallas, y de hecho como habrás comprobado hemos añadido incluso una capa de protección, será una imagen de 1x1 que sea transparente, ahora vamos con el css

#slider {
height: 350px;
width: 100%;
}
#slider img {
background-color: #ccc;
bacground-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 350px;
width: 100%;
}

Prueba a ver el codigo, la verdad que lo estoy haciendo para ti, probaré yo también pero debe funcionar

Hola gracias por la ayuda! en cuanto tenga hueco pruebo el código que me comentas :D :D lo único que no entiendo es porqué el pixel transparente que se usa en la <img/>

[pzin]

Simplemente pon la imagen como fondo de algún elemento. Pero no hagas eso de ponerlo como fondo de una imagen, es horrible.

Sólo tienes que usar background-size: cover.