Crop al estilo Google Friend Connect

pcarvajal · #1 (**permalink**) 23/09/2009, 19:43

Pues eso.. como puedo hacer un crop de varias imagenes que tengo (todas o la mayoria son de 90x60) y que queden de 32 x 32 una al lado de otra?

alexk · #2 (**permalink**) 23/09/2009, 21:33

perdona mi ignorancia pero no tengo ni idea de que es eso... una captura?... o algo de como lo quieres?
me suena como un simple menu de imagenes...

kseso? · #3 (**permalink**) 24/09/2009, 07:33

¿Este tema vendrá al hilo?

pcarvajal · #4 (**permalink**) 24/09/2009, 07:45

Gracias a ambos por contestar

alexk (

) , sí es un simple menú de imagenes:
http://latingeeks.net/wp-content/upl...nd-connect.jpg
La idea es hacerle un crop a las imagenes de 90x60 para que queden de 32x32

kseso? (

), sí, algo así, pero no quiero forzarlo de esa manera porqué deformaria la imagen y no es la idea. He visto que css hace crops de imagenes, pero intente unos cuantos códigos y funcionan solo con una inmagen y no con varias.

No quiero tener que crear una nueva imagen de 32x32 a partir de la de 90x60 porque sería muy trabajoso... son muchas imagenes... por eso recurro a css para ver si se puede hacer algo.

Saludos!

alexk · #5 (**permalink**) 24/09/2009, 08:42

no entiendo que te detiene... tan solo veo que le forzan el ancho y el alto a 32px... nada mas... lo que pasa es que tus imágenes no son proporcionales es decir deberían ser de 90x90 o bien de 60x60 para que se vea bien chao y suerte!...

pcarvajal · #6 (**permalink**) 24/09/2009, 08:54

pues eso, que no quiero forzarlas porque no será proporcional la imagen de 32 x 32 (y tampoco me voy a dar la paja de transformar las imagenes de 90x60 a miniaturas de 32x32 a mano)

por eso la idea es hacerle un crop con css..

kseso? · #7 (**permalink**) 24/09/2009, 09:16

Si no quieres redimensionar las imágenes sino mostrar sólo una parte de ellas tienes dos opciones vía css:
Utilizar la propiedad clip. Más info clip + css
Colocar cada imagen en una caja con medidas declaradas (32x32px) y overflow: hidden para que sólo se muestre el recuadro superior izquierdo.

Un saludo

pcarvajal · #8 (**permalink**) 24/09/2009, 10:27

ok, después de unos cuantos intentos, aquí les dejo el código por si a alguien más le sirve:

Cita:

<html>
<head>
<style>
#crop {
width:50px;
height:50px;
overflow:hidden;
}

#crop img{
margin:-10px 0px 0px -20px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<div id="crop"><img src="http://img.trovit.com/img-cl_casa-P23253c4a670098c6556.jpg"></div>
</td>
<td>
<div id="crop"><img src="http://webrural.com/imglib/fotos/small/c/casa-rural-lleida-casa-farre-vistas-cardet.jpg" width="90" height="60"></div>
</td>

</tr>
</table>
<br>
<br>
<img src="http://img.trovit.com/img-cl_casa-P23253c4a670098c6556.jpg"><br>
<img src="http://webrural.com/imglib/fotos/small/c/casa-rural-lleida-casa-farre-vistas-cardet.jpg">
</body>
</html>

Gracias por la ayuda

Saludos !

jomaruro · #9 (**permalink**) 25/09/2009, 13:27

Hola:

Por lo que deduzco hacer un crop es redimensionar ¿no?. ¿Y es tan difícil ponerlo en castellano?

Saludos.

pcarvajal · #10 (**permalink**) 25/09/2009, 13:37

No, crop no es redimensionar, redimensionar es "resize".
Crop es "tomar una porción", pero en el contexto de la pregunta que formulé era más fácil formarse una idea de lo que pedía utilizando la palabra inglesa que la versión en español.

Saludos