imagen grande

[el_tigre]

Que tal foreros, quería solicitarles su apoyo a los que saben del tema, tengo una imagen que se debería adecuar al ancho de la pantalla, la imagen mide 1000px pero cuando el monitor es grande la imagen va bien, pero cuando la imagen es chica como una tabla esta se desborda......he intentado mejorarlo pero no lo he logrado


picture sharing

Esto es lo que hice en el CSS.

Código PHP:

  .coin-slider { 
    zoom: 1; 
    float: left;
//esto agregué
    width: 100%;
    overflow:hidden;
}
#coin-slider { 
    width: 100%;
    overflow: hidden; 
    -moz-box-shadow: 0px 1px 5px 0px #4A4A4A;
    -webkit-box-shadow: 0px 1px 5px 0px #4A4A4A;
    box-shadow: 0px 1px 5px 0px #4A4A4A;
} 
   

esta es la web en mención

[chichote]

ingrese al link pero no veo el efecto no deseado que mencionas, de hecho es otra plantilla, no la misma de la imagen.

el tema de las imagenes, debes decirle a la imagen que será 100%, por ejemplo si .coin-slider es tu contenedor, entonces debiera ser algo como

Código:

.coin-slider img {  
    width: 100%; 
}

Saludos.

[ryugen]

Todos los contenedores padres del elemento (imagen) tiene que tener "overflow:hidden;" para lograr lo que quieres. Mira este ejemplo:
http://jsfiddle.net/ym9MX/1/

Para algo no tan complejo, puedes colocar la imagen como background de un elemento. En la medida que aumente el ancho del mismo, aumentará el tamaño de la imagen visible. La única desventaja que le veo a este segundo metodo es que tienes que definir el alto del elemento de manera fija.

http://jsfiddle.net/M2aYQ/

Prueba en ambos cambiando el tamaño de la zona de result.

[el_tigre]

Iniciado por chichote

ingrese al link pero no veo el efecto no deseado que mencionas, de hecho es otra plantilla, no la misma de la imagen.

el tema de las imagenes, debes decirle a la imagen que será 100%, por ejemplo si .coin-slider es tu contenedor, entonces debiera ser algo como

Código:

.coin-slider img {  
    width: 100%; 
}

Saludos.

Probé este código pero no surtió efecto alguno......

Iniciado por ryugen

Todos los contenedores padres del elemento (imagen) tiene que tener "overflow:hidden;" para lograr lo que quieres. Mira este ejemplo:
http://jsfiddle.net/ym9MX/1/

Para algo no tan complejo, puedes colocar la imagen como background de un elemento. En la medida que aumente el ancho del mismo, aumentará el tamaño de la imagen visible. La única desventaja que le veo a este segundo metodo es que tienes que definir el alto del elemento de manera fija.

http://jsfiddle.net/M2aYQ/

Prueba en ambos cambiando el tamaño de la zona de result.

Estoy intentando poner "overflow:hidden;" a todos los elementos de la imagen padres, pero nada.

Con respecto a la segunda opción.....no estoy manejando una sóla imagen sino un SLIDER de varias imágenes que cambia...

No lo he logrado aun..........esperando ayuda