Foros del Web » Creando para Internet » CSS »

Div redondo e imagen deforme

Estas en el tema de Div redondo e imagen deforme en el foro de CSS en Foros del Web. ¡¡¡Hola!!!: Estoy haciendo pruebas para adaptar un código a mi página y me ha surgido un problemilla. Introduzco un archivo de imagen en el servidor ...
  #1 (permalink)  
Antiguo 10/10/2012, 08:36
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 13 años, 2 meses
Puntos: 2
Pregunta Div redondo e imagen deforme

¡¡¡Hola!!!:
Estoy haciendo pruebas para adaptar un código a mi página y me ha surgido un problemilla. Introduzco un archivo de imagen en el servidor y guardo la ruta en una base de datos (esta imagen pertenece a un determinado usuario), así como su thumbnail (más tarde haré que la foto original se destruya al crear dicha miniatura). En otra página muestro, a través de un div redondo el thumbnail de la imagen. El problema surge porque, las imágenes horizontales se muestran sin apenas distorsión pero, en cambio, las verticales están muy deformes. He leído que una posible solución sería hacer un crop a través de css al thumbnail, pero al intentarlo, sólo he conseguido que se modifique la forma del div o que se borre el efecto redondo de dicho div. ¿Podríais ayudarme a conseguirlo?. O si sabéis otra opción o posible solución a mi problema os lo agredecería mucho.

Código php que introduce el archivo en la bd:
Código PHP:
<?php
include("conexion.php"); $link Conectarse ();
//comprobamos la imagen y la extension
  //array de archivos disponibles
  
$archivos_disp_ar = array('jpg''jpeg''gif''png''tif''tiff''bmp');
  
//carpteta donde vamos a guardar la imagen
  
$carpeta 'imagen/';
  
//recibimos el campo de imagen
  
$imagen $_FILES['imagen']['tmp_name'];
  
//guardamos el nombre original de la imagen en una variable
  
$nombrebre_orig $_FILES['imagen']['name'];
 
  
//el proximo codigo es para ver que extension es la imagen
  
$array_nombre explode('.',$nombrebre_orig);
  
$cuenta_arr_nombre count($array_nombre);
  
$extension strtolower($array_nombre[--$cuenta_arr_nombre]);
   
//validamos la extension
  
if(!in_array($extension$archivos_disp_ar))
 
   
$error "Este tipo de archivo no es permitido"$error_img "error"
  
  if(empty(
$error)){
  
      
//creamos nuevo nombre para que tenga nombre unico
      
$nombre_nuevo time().'_'.rand(0,100).'.'.$extension;
      
//nombre nuevo con la carpeta
      
$nombre_nuevo_con_carpeta $carpeta.$nombre_nuevo;
      
//por fin movemos el archivo a la carpeta de imagenes
      
$mover_archivos move_uploaded_file($imagen $nombre_nuevo_con_carpeta);
      
//de damos permisos 777
      
chmod($nombre_nuevo_con_carpeta,0777);}
      
       
// finalmente guardamos todo
  
  
//CREAR EL THUMB
$original imagecreatefromjpeg($nombre_nuevo_con_carpeta); 
/* Hallamos la anchura y altura de la imagen original */
$ancho imagesx($original);
$alto imagesy($original);
/* Indicamos la anchura que tendrá la miniatura // Originalmente es 100 */
$anchomini=300;
/* Obtenemos por una simple regla de tres la altura de la miniatura */ 
$altomini=($alto*$anchomini)/$ancho;
/*verificamos que los valores de ancho y alto no excedan nuestro limite por imagen*/
    
if($altomini>300){
        
$altomini 300;
        
$anchomini = ($ancho*300)/$alto;
    } 
/* Dimensionamos la miniatura */ 
$thumb imagecreatetruecolor($anchomini,$altomini);
/* Se obtiene por interpolación la miniatura en memoria */ 
imagecopyresampled($thumb,$original,0,0,0,0,$anchomini,$altomini,$ancho,$alto); 
imagejpeg($thumb,"thumb/tn_$nombre_nuevo",90); 
$miThumb="thumb/tn_$nombre_nuevo";

$idusuario mysql_insert_id();
mysql_query("INSERT INTO registro(idusuario,nombre_nuevo_con_carpeta,miThumb)VALUES('{$idusuario}','{$nombre_nuevo_con_carpeta}','{$miThumb}')") or die(mysql_error());

?>
Código que muestra la imagen:
Código PHP:
<?php
// Configura los datos de tu cuenta 
include("conexion.php"); $link Conectarse ();
session_start();



$sql_fotos mysql_query("SELECT * FROM registro WHERE idusuario = '23'");
$res_fotos mysql_fetch_array($sql_fotos);
//realizamos la comprobacion de los datos


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:363px;
    height:337px;
    z-index:1;
    left: 17px;
    top: 7px;
    overflow: hidden;
    background-color: #0FC;
}
#muestra {
    border-radius: 156px 153px 151px 151px;
    -moz-border-radius:156px 153px 151px 151px;
    -o-border-radius: 156px 153px 151px 151px;
    -ms-border-radius: 156px 153px 151px 151px;
    -khtml-border-radius: 156px 153px 151px 151px;
    -webkit-border-radius: 156px 153px 151px 151px;
    behavior:url(PIE.htc);
    height: 279px;
    width: 315px;
    position: absolute;
    top: 24px;
    left: 36px;
}
</style>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<div id="apDiv1">
<?php echo '<img  id=muestra src="'.$res_fotos['miThumb'].'" width="300px" height="280px"></img>'?>
</div>
</form>
</body>
</html>
  #2 (permalink)  
Antiguo 10/10/2012, 10:47
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 12 años, 5 meses
Puntos: 86
Respuesta: Div redondo e imagen deforme

Hola si pruebas con width="100%" sin height
__________________
Saludos!
----------------------------------------------------------
  #3 (permalink)  
Antiguo 10/10/2012, 11:00
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 13 años, 2 meses
Puntos: 2
Respuesta: Div redondo e imagen deforme

Hola, lo he probado pero no funciona, la imagen sigue distorsionada y el círculo del div que muestra dicha foto se deforma al hacer lo que me has comentado.¿Alguna otra idea? Yo sigo buscando cosas, pero todo lo que intento no sale...

La cuestión es que la imagen original tiene estas dimensiones: 3216 X 4288. El PHP la reduce mucho, se queda en 225 x 300, pero al no ser un thumbnail cuadrado, luego en el div se estira. Por eso pensé en que una opción sería el crop, pero no sé cómo adaptarlo...
  #4 (permalink)  
Antiguo 10/10/2012, 13:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Div redondo e imagen deforme

Hola, querida. ¿Cómo estás?.

Me parece que la idea de flashmax () no te funciona porque si estás hablando de que el PHP te hace la miniatura, entonces ya la bajás con ancho y alto proporcional. ¿Para qué le pisás esos valores dentro de la etiqueta de la imagen?. Borrale el alto y el ancho(*).

Si el thumbnail llega con medidas que no te sirven, entonces tu problema es PHP, no CSS.
Por otro lado, aquí tenés que poner el código HTML generado en tu página, no el PHP.
Justo tu caso se entiende igual, pero no corresponde. Y menos ¡código que ni tiene que ver con la muestra de la imagen!

Si hay algún detalle que se nos está pasando, avisanos. De otra forma, pedí el traslado "autorreportando" tu tema (ignorá las advertencias sobre peleas o spam).

Beso
furoya

(*) O sólo el ancho, o sólo el alto. Creo que hay un error en la descripción, porque los valores del código no coinciden con lo que explicás en el texto. Alguno de los dos -doy por seguro- está mal.
  #5 (permalink)  
Antiguo 10/10/2012, 14:28
 
Fecha de Ingreso: octubre-2011
Mensajes: 160
Antigüedad: 13 años, 2 meses
Puntos: 2
Respuesta: Div redondo e imagen deforme

Hola corassón!!! ¿Cómo estás?

Yo liadita con el tema, aunque por fin he encontrado la solución.

Te explico cuál era el problema. Los valores que pisaban eran NECESARIOS ya que no se podían modificar por ser los del div que muestra la imagen e iban encajados en un (puñetero) dibujo de fondo.

Después de buscar, buscar y buscar, leí el tema del crop, creí que eso era factible, ya que, en principio, iba a cortar la imagen, pero de las mil maneras que probré, en todas se modificaban las propiedades del div, no del thumb. Al ser un tema de css, lo incluí aquí junto con el php (el html es sólo un input de archivo y un botón de enviar, por eso no lo vi importante).

Hace 5 minutos, antes de leer tu mensaje, modifiqué el código php, ya que encontré esta página: http://casamadrugada.net/tutoriales/...y-libreria-gd/ y, finalmente, conseguí lo que estaba buscando.

Este es el código php modificado, adaptadado para sacar el thumbnail de una base de datos y que funciona:
Código PHP:
$miniatura_ancho_maximo 315;
$miniatura_alto_maximo 279;
 
$info_imagen getimagesize($nombre_nuevo_con_carpeta);
$imagen_ancho $info_imagen[0];
$imagen_alto $info_imagen[1];
$imagen_tipo $info_imagen['mime'];
 
 
$proporcion_imagen $imagen_ancho $imagen_alto;
$proporcion_miniatura $miniatura_ancho_maximo $miniatura_alto_maximo;
 
if ( 
$proporcion_imagen $proporcion_miniatura ){
    
$miniatura_ancho $miniatura_alto_maximo $proporcion_imagen;
    
$miniatura_alto $miniatura_alto_maximo;
} else if ( 
$proporcion_imagen $proporcion_miniatura ){
    
$miniatura_ancho $miniatura_ancho_maximo;
    
$miniatura_alto $miniatura_ancho_maximo $proporcion_imagen;
} else {
    
$miniatura_ancho $miniatura_ancho_maximo;
    
$miniatura_alto $miniatura_alto_maximo;
}
 
$x = ( $miniatura_ancho $miniatura_ancho_maximo ) / 2;
$y = ( $miniatura_alto $miniatura_alto_maximo ) / 2;
 
switch ( 
$imagen_tipo ){
    case 
"image/jpg":
    case 
"image/jpeg":
        
$imagen imagecreatefromjpeg$nombre_nuevo_con_carpeta );
        break;
    case 
"image/png":
        
$imagen imagecreatefrompng$nombre_nuevo_con_carpeta );
        break;
    case 
"image/gif":
        
$imagen imagecreatefromgif$nombre_nuevo_con_carpeta );
        break;
}
 
$lienzo imagecreatetruecolor$miniatura_ancho_maximo$miniatura_alto_maximo );
$lienzo_temporal imagecreatetruecolor$miniatura_ancho$miniatura_alto );
 
imagecopyresampled($lienzo_temporal$imagen0000$miniatura_ancho$miniatura_alto$imagen_ancho$imagen_alto);
imagecopy($lienzo$lienzo_temporal0,0$x$y$miniatura_ancho_maximo$miniatura_alto_maximo);
 
imagejpeg($lienzo"thumb/tn_$nombre_nuevo"90);
$miThumb="thumb/tn_$nombre_nuevo"
Perdón si me he explicado un poco mal y por eso no me habéis podido ayudar. Y, bueno, a la espera de ser trasladada, jejeje. Besinessss furoya. ;)
  #6 (permalink)  
Antiguo 10/10/2012, 16:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Div redondo e imagen deforme

¡Pero claro!
Como yo no sé PHP, ni me detuve a mirar el código que dejaste.
No te bajaba la imagen proporcional, le daba un ancho fijo, y la altura era proporcional a ese ancho, ya sin importar el tamaño original.

El segundo código lo que hace es buscar primero si es vertical o apaisada, y le da el tamaño al que sea mayor. Después sí ajusta proporcionalmente al otro.

Sí, era un problema del PHP, pero yo me imaginaba otro.

(Uy! Nunca me fijé que sí había un emoticón de "beso" )

*

Etiquetas: crop, divredondo, imagen+distorsion, thumbnails
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:47.