Mostrar solo una porcion de una imagen usando CSS

[Hyemin]

Hola como estan?

Tengo un blog y genero los articulos en la portada con un div con secciones, la seccion principal del articulo tiene 300 caracteres y corto el resto, pero si dentro de los 300 carecteres hay una imagen esta se muestra completa.

Hay alguna forma de "trocearla"?

Tamb ien pense en poner un div arriba del articulo para meter una imagen como lo hace http://www.thebagofloot.com/ en sus articulos, pero no se exactamente como hacer que la imagen se ajuste al area

[AngelKrak]

no entendi muy bien amigo pero si lo que quieres hacer es que solo se muestra Alguna Parte X y la otra quede oculta puedes hacerlo con background-position: 0px 0px;

Mira un ejemplo de mi web(El Icono ON/OFF de Notificaciones):
http://dragons-mw.hol.es/

[fede5426]

Lo que hicieron en esa web que diste de ejemplo, es usar un div como bien dijiste, a ese div le dan un alto fijo y a la imagen en su interior un width del 100%. Probalo así.

[mardojai]

Si te das cuenta, la imagen esta puesta completa con "width: 100%;" y "height: auto;".
La imagen esta dentro de un <a> que tiene "display: block;", "width: 100%;" y "height: 140px;", lo que hace que el <a> que contiene la imagen sea menos alto que la imagen. Con solo eso, se vería la imagen con un pequeño sobresaliente debajo que tapa el texo. Ese sobresaliente es lo que le sobra a la imagen al "140px" de alto que tienen el <a>.



Esto se soluciona con un "overflow: hidden;" al <a> XD



Y si experimentamos poniéndole "auto" en lugar de "hidden", la imagen tendrá un scroll con la que podremos verla completa:



Saludos!

[fede5426]

Cierto, olvide el overflow :P