[SOLUCIONADO] Cómo seleccionar región concreta de imagen

[zepolv2]

Hola compañeros,

Llevo leyendo muchísimo tiempo el foro, he aprendido con las dudas y las soluciones dadas en él. Sin embargo, ahora me ha surgido una duda y no he logrado encontrar solución exacta al problema. O al menos no lo he conseguido o no es posible. Os dejo mi problema:

Tengo en mi web unas 80 imágenes todas iguales, sólo cambian la parte central (foto de una persona). De origen las necesito en 1500px de ancho para que me ocupen el ancho de una página a modo de cabecera, pero quiero aprovecharlas para hacer un diseño más pequeño que sólo coja el centro de esa imagen que es 300px que es donde está la cara de la persona digamos.

La opción más fácil, pero debido a la cantidad de imágenes se me antoja ahora mismo demasiado laborioso sería coger todas las imágenes y recortarlas a esos 300px que necesito. Sin embargo, si con código fuera posible seleccionar esa parte central de la imagen de 1500px sería simplemente y llamando a las imágenes y que automáticamente me seleccionaran ese espacio.

¿Cómo lo puedo hacer? ¿Cómo puedo seleccionar una única parte de la imagen y descartar por ambos lados lo que no necesito?

Gracias por vuestra ayuda y me veréis activo por aquí, ahora que me he animado a registrarme.

[pzin]

Ponla como una imagen de fondo centrada en un elemento con las medidas necesarias. Una especie de máscara si quieres verlo así.

Código CSS:

div {
  width: 300px;
  height: 300px;
  background: url(cara.jpg) center;
}
 

[hackjose]

Otra opcion es usar bordes de imagen

http://jsfiddle.net/maonv9pp/

[caricatos]

Hola:

Por el enunciado, creo que clip es lo más adecuado...

Saludos

[zepolv2]

Gracias a los tres. He probado todas y las que me ha funcionado o he conseguido que haga lo que exactamente quiero es con el atributo clip. Sin embargo, cuando lo traslado a la web que está en wordpress y lo meto dentro de un Raw HTML para poner código más complejo en una parte de la página, no me funciona bien, mientras que en un archivo independiente si me funciona.

¿Sabéis si existe alguna limitación en Wordpress para esto? Es que es raro que lo pruebe el código fuera en un archivo y funcione, y luego en wordpress no.

Gracias de nuevo.

[AngelKrak]

ese problema puede ser que este dando interferencia tus Divs/Clases con los de Wordpress, trata de Poner ID/CLASS propios para que no se interfieran entre si ;)

[zepolv2]

Eso he hecho, Angel, he puesto un id propio al img al que aplico el clip, pero no me aparece la imagen, sino que me da el espacio con el color del fondo que te tengo puesto.

Por si vale de información, la imagen tiene un hover que le quita opacidad y escribo sobre la imagen de la persona su nombre, cargo, etc. Por tanto tiene un front y un back, dentro del front tengo el div con la img a la que querría aplicar el clip.

Como digo, fuera de en un archivo me funciona a la perfección, pero es meterlo en wordpress a través del Raw HTML y no me aparece la imagen, ni siquiera mal recortada, simplemente, no la coge.

un saludo y gracias de nuevo

[AngelKrak]

no tienes la pagina subida? pues si la imagen no aparece debes de tener mal La ruta especificada >_<

no tienes alguna captura del error?

[zepolv2]

Muchas gracias a todos por vuestra ayuda. Ya está solucionado gracias a vuestra colaboración.

[pzin]

¿Qué fallaba zepolv2?