Foros del Web » Creando para Internet » CSS »

Crop al estilo Google Friend Connect

Estas en el tema de Crop al estilo Google Friend Connect en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/09/2009, 20:43
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Crop al estilo Google Friend Connect

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?
  #2 (permalink)  
Antiguo 23/09/2009, 22:33
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Crop al estilo Google Friend Connect

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...
  #3 (permalink)  
Antiguo 24/09/2009, 08:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crop al estilo Google Friend Connect

¿Este tema vendrá al hilo?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 24/09/2009, 08:45
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Crop al estilo Google Friend Connect

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!
  #5 (permalink)  
Antiguo 24/09/2009, 09:42
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Crop al estilo Google Friend Connect

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!...
  #6 (permalink)  
Antiguo 24/09/2009, 09:54
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Crop al estilo Google Friend Connect

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..
  #7 (permalink)  
Antiguo 24/09/2009, 10:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crop al estilo Google Friend Connect

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 24/09/2009, 11:27
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Crop al estilo Google Friend Connect

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 !

Última edición por pcarvajal; 24/09/2009 a las 15:23
  #9 (permalink)  
Antiguo 25/09/2009, 14:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Crop al estilo Google Friend Connect

Hola:

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

Saludos.

  #10 (permalink)  
Antiguo 25/09/2009, 14:37
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Crop al estilo Google Friend Connect

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:23.