Foros del Web » Creando para Internet » CSS »

Cortar imagenes con CSS

Estas en el tema de Cortar imagenes con CSS en el foro de CSS en Foros del Web. Hola a todos, tengo este problema en mi sitio: Uploaded with ImageShack.us Son imagenes redimensionadas con php, digamos que el motor "matematico" aveces hace que ...
  #1 (permalink)  
Antiguo 06/04/2011, 14:40
Avatar de VbOkonly  
Fecha de Ingreso: julio-2009
Ubicación: San Justo, Buenos Aires, Argentina
Mensajes: 490
Antigüedad: 8 años, 5 meses
Puntos: 5
Cortar imagenes con CSS

Hola a todos, tengo este problema en mi sitio:



Uploaded with ImageShack.us

Son imagenes redimensionadas con php, digamos que el motor "matematico" aveces hace que si tengo una imagen de 2000px x 1000px me la redimensione a 20px x 10px y no a 10px x 10px como quiero yo, entonces se muestran asi, medias falladas :P, me gustaria saber si hay alguna manera de que yo con CSS pueda mostrar las imagenes con una forma "cuadrada" o "rectangular" o como sea, pero que esten bien alineadas y sea algo ordenado ... Si me pueden dar un consejo o algo, lo ideal seria usar una clase que las muestre bien con CSS ...

¿Algun consejo?, intenté con algunas clases de estas que se usan para los album de fotos online, pero no funcionó, se mostraban igual ...

Muchas gracias!
  #2 (permalink)  
Antiguo 06/04/2011, 22:12
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Cortar imagenes con CSS

la ecuación es simple matemáticas de regla del 3:

ancho 2000px ---> alto 1000 px
ancho 20px ---> alto ?

aplicamos: ancho 20px * alto 1000px / ancho 2000px = 10px

de otro modo la imagen resultante perdería la proporción y se alargaría o ensancharía.

lo que puedes hacer con CSS es posicionarla correctamente en el centro con background-position
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 07/04/2011, 00:58
Avatar de VbOkonly  
Fecha de Ingreso: julio-2009
Ubicación: San Justo, Buenos Aires, Argentina
Mensajes: 490
Antigüedad: 8 años, 5 meses
Puntos: 5
Respuesta: Cortar imagenes con CSS

Nono, no entendiste muy bien, te explico un poco mejor y disculpa si me exprese mal :P, lo que deseo es que pueda yo ocultar un poco de la imagen para que TODAS tengan iguales proporciones, me sucede que tengo las imagenes como en la foto(desproporcionadas) y con CSS quiero que TODAS queden iguales, es decir, solo mostrar una proporción, lo ideal seria que se muestre todo proporcionado y tenga el efecto de "una buena redimension". se entiende mejor? :P


Gracias por responder! :D
  #4 (permalink)  
Antiguo 07/04/2011, 05:40
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Cortar imagenes con CSS

Pero yo las veo proporcionadas lo que creo que quieres es que salgan todas apaisadas, pero eso creo que depende de la fotografía en sí, no puedes cambiar una imagen con CSS. Si lo que quieres es que todas sean "cuadradas" imagino que con librerías de PHP se podría hacer, pero
__________________
Cool Village
@Wakkos
  #5 (permalink)  
Antiguo 07/04/2011, 06:33
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Cortar imagenes con CSS

Hola

Si la imagen esta en el html como <img> no podras hacerlo ya que te deformara la imagen, si quieres que solo la recorte tiene que estar en el css como bacground , de esta manera si le das un ancho o un largo solo cortara la imagen sin deformartela
  #6 (permalink)  
Antiguo 07/04/2011, 08:43
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: Cortar imagenes con CSS

en mi caso usaria PHP para las miniaturas pero bueno... una solucion seria...
Código HTML:
Ver original
  1. <div class="padre">
  2.         <img src="img1.jpg" />
  3.     </div>
  4.     <div class="padre">
  5.         <img src="img2.jpg" />
  6.     </div>
  7.     <div class="padre">
  8.         <img src="img3.jpg" />
  9.     </div>
  10.     <div class="padre">
  11.         <img src="img4.jpg" />
  12.     </div>
Código CSS:
Ver original
  1. .padre{float:left;height:150px;margin:5px;overflow:hidden;width:150px;}
no funciona en todas... ya que depende de la imagen... pero estan cuadradas y las recorta asi que...

---------------------

El resultado seria algo parecido...

Última edición por alexk; 07/04/2011 a las 08:44 Razón: agregar imagen...
  #7 (permalink)  
Antiguo 07/04/2011, 10:15
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: Cortar imagenes con CSS

Es mucho más optimo y da un mejor resultado crear una img aparte para el thumb que estar redimensionándolas con PHP o HTML.

Un saludo
  #8 (permalink)  
Antiguo 07/04/2011, 10:59
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: Cortar imagenes con CSS

Cita:
Iniciado por fishdesign Ver Mensaje
Es mucho más optimo y da un mejor resultado crear una img aparte para el thumb que estar redimensionándolas con PHP o HTML.

Un saludo
óptimo si son de 2 a 5 imágenes... si es una galería de 20 o 50... bufff
  #9 (permalink)  
Antiguo 07/04/2011, 12:25
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: Cortar imagenes con CSS

Cita:
Iniciado por alexk Ver Mensaje
óptimo si son de 2 a 5 imágenes... si es una galería de 20 o 50... bufff
Al revés, no es lo mismo redimensionar 50 imágenes que redimensionar 2. A más imágenes, mayor será el consumo de recursos.

Con una librería como gd o imagamagick puedes sacar el thumb automáticamente y luego enlazarlo.

Obviamente consumirá muchos menos recursos y puede ser bastante importante si la web es muy solicitada.


Un saludo
  #10 (permalink)  
Antiguo 07/04/2011, 13:36
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: Cortar imagenes con CSS

bueno eso es otro tema.. diste a entender que haga las miniaturas manualmente... "optimo" en cuanto a tiempo pues no... pero bueno ya el hará lo que crea conveniente... ya que estamos en el foro de CSS y la respuesta ya la tiene
  #11 (permalink)  
Antiguo 13/04/2011, 16:36
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Cortar imagenes con CSS

En mi opinión entre más automatizado el proceso mejor.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #12 (permalink)  
Antiguo 13/04/2011, 17:52
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 6 años, 8 meses
Puntos: 37
Respuesta: Cortar imagenes con CSS

Hola.

Yo lo que suelo hacer es, además de crear los thumbs con php, utilizar un fondo (tipo canvas) para que ocupen exactamente lo mismo.

Me explico:

Código PHP:
    $origen imagecreatefromjpeg($imagen);
    
$x imagesx($origen);
    
$y imagesy($origen);
    
$nx 200;        // establezco el ancho máximo
    
$ny $y*$nx/$x;  // regla de 3 que comentan por ahí arriba
    
$destino imagecreatetruecolor(200,200);    // tamaño total de la imagen: 200x200 (esto vendría a ser el canvas)
    
imagecopyresized($destino,$origen,0,0,0,0,$nx,$ny,$x,$y);

    
$destino_tn 'ruta-de-destino/tn_'.$fileName;    
    
imagejpeg($destino $destino_tn 100); 
De esta manera, verás un fondo negro ocupando 200x200 y dentro la imagen. Eso sí, si el alto de la imagen es más pequeño que 200, se verá pegada a la parte superior y dejará un hueco negro en la inferior. Para evitar esto, tendrás que utilizar algo más de matemática y modificar un poco la función imagecopyresized:

Código PHP:
    $posx = (200 $nx) / 2;            // si el ancho de la imagen se ajusta a los 200px, el resultado será 0
    
$posy = (200 $ny) / 2;            // si, lo que interesa, que es el alto, es de pongamos 150px, el resultado será 25.
                                        // Y esto nos centraría la imagen en nuestro canvas.

    
imagecopyresized($destino,$origen,$posx,$posy,0,0,$nx,$ny,$x,$y);    // ahora indicamos las coordenadas del punto
                                                                         // de origen y de destino 
Creo que no me he dejado nada atrás. Que alguien me corrija si es así.


Espero que sirva de ayuda. Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.

Última edición por KoswiDigital; 13/04/2011 a las 18:55 Razón: he cometido un pequeño error en la última función. solucionado.

Etiquetas: cortar, imagenes
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 12:55.