Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] mostrar imagen en un tamaño pequeño

 Estas en el tema de mostrar imagen en un tamaño pequeño en el foro de PHP en Foros del Web. hola alguien puede ayudarme en como mostrar las imagenes subidas en un tamaño pequeño esta es la pagina donde aparecen las imagenes @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código ...
  #1 (permalink)  
Antiguo 26/12/2013, 05:07
andaluz7
Invitado
  
Mensajes: n/a
Puntos:
mostrar imagen en un tamaño pequeño
hola alguien puede ayudarme en como mostrar las imagenes subidas en un tamaño pequeño

esta es la pagina donde aparecen las imagenes


Código PHP: 
Ver original
  1. <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
  2. <html>
  3. <head>
  4.        <title>Title here!</title>
  5. <meta http-equiv="" content="text/html; charset=iso-8859-1"></head>
  6. <body text="#0000FF">
  7. <body bgcolor="#cccccc">
  8. <?include("cabeza.htm");?>
  9. <br>
  10. <table align='center' border='0' bordercolor="#FFffff" >
  11. <tr bgcolor='#666666'><td bgcolor="#CCCCCC">
  12. <p align="center"><a href='altatema.php'><font size='4' color='#0000FF'>Agregar Temas</font> </a></p>
  13.  </td></tr>
  14. <?php
  15.  
  16. if ($abierto = mysql_connect ("localhost","root","7777777")){
  17.  
  18. $leer = "SELECT id,tema,autor,hijos,fecha,ruta FROM TEMAS  WHERE tema<>' '";
  19.  
  20. $datos = mysql_db_query ("Foro",$leer);
  21.  
  22. print("<table width='70%'  border='0'>");
  23. print ("<tr bgcolor='#000000'>
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.         <td align='center'><font size='4' color='#ffffff'>Tema</font></td>
  32.         <td align='center'><font size='4' color='#ffffff'>Autor</font></td>
  33.        
  34.        
  35.  
  36.  
  37.  
  38. <td align='center'><font size='4' color='#ffffff'>fecha</font></td>");
  39.  
  40. while ($fila = mysql_fetch_array ($datos)) {
  41. print (" <tr><td bgcolor='#1885c1' align='center'><a href='listahijos.php?var=$fila[0]'><img src='".$fila[5]."'>
  42.  
  43.  
  44.   
  45.         <td bgcolor='#1885c1' align='center'width='700%'height='700%'>".$fila[2]."</td>
  46.        
  47.         <td bgcolor='#1885c1' align='center'>".$fila[4]."</td>");
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.        
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63. }
  64. print ("</table>");
  65. } else {
  66. print ("No se puede conectar. Intente nuevamente");
  67. }
  68. ?>
  69. <hr>
  70. </body>
  71. </html>



con esto mostro la imagenmes pero salen en tamaño original quiero que salgan en tamaño pequeño
gracias

Código PHP: 
Ver original
  1. <a href='listahijos.php?var=$fila[0]'><img src='".$fila[5]."'>
  #2 (permalink)  
Antiguo 26/12/2013, 05:14
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: mostrar imagen en un tamaño pequeño
Hola, muy buenas.

Lo que es esta etiqueta:

Código PHP: 
Ver original
  1. <img src='".$fila[5]."'>

Dale un estilo al img con css.

Puedes hacer lo siguiente:

Código PHP: 
Ver original
  1. <img class="claseimagen" src='".$fila[5]."'>

Y en el css pones lo siguiente:

Código CSS: 
Ver original
  1. .claseimagen{
  2.       max-width: 50px; // Hay pones la anchura que quieras que  tenga la imagen.
  3.       max-height: 50 px; // Aquí pones la altura que deseas que tenga la imagen.
  4. }

O también está esta forma más ligera:

Código PHP: 
Ver original
  1. <img style="max-width: 50px; max-height: 50px;" src='".$fila[5]."'>

Son los mismos resultados pero distintas formas de hacerlo.
Prueba con la que te pueda dar resultado.

¡Felices fiestas!

Saludos.
  #3 (permalink)  
Antiguo 26/12/2013, 05:43
Avatar de moriorGames  
Fecha de Ingreso: diciembre-2013
Ubicación: Barcelona
Mensajes: 37
Antigüedad: 10 años, 4 meses
Puntos: 3
Respuesta: mostrar imagen en un tamaño pequeño
Si quieres redimensionar imágenes mejor que preguntes en el foro de css. Aunque tampoco es una buena práctica tener que redimensionar las imágenes. Es mejor tenerlas en el tamaño que vayas a necesitar.

El compañero TSG te ha respondido correctamente :)
__________________
Mi juego de estrategia medieval si lo entras hazme llegar tu opinión por favor, siempre la tengo en cuenta.
  #4 (permalink)  
Antiguo 26/12/2013, 06:10
 
Fecha de Ingreso: diciembre-2013
Mensajes: 4
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: mostrar imagen en un tamaño pequeño
Lo suyo es guardar la imágen al tamaño que quieras como dice moriorGames así pesarán menos y ahorras en tiempo de carga.

Pero si no te quieres complicar la mejor solución es CSS o HTML

Código: 
    <img src='".$fila[5]." width="100" heigth="100"'>
  #5 (permalink)  
Antiguo 26/12/2013, 06:51
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: mostrar imagen en un tamaño pequeño
Cita:
Iniciado por davidpulido Ver Mensaje
Lo suyo es guardar la imágen al tamaño que quieras como dice moriorGames así pesarán menos y ahorras en tiempo de carga.

Pero si no te quieres complicar la mejor solución es CSS o HTML

Código: 
    <img src='".$fila[5]." width="100" heigth="100"'>
Aquí sólo le darías un tamaño fijo y la imagen quedaría recortada.

Para que se ajuste a un tamaño precios se usa max-width y max-heigt.

Saludos.
  #6 (permalink)  
Antiguo 26/12/2013, 08:06
Avatar de loncho_rojas
Colaborador
  
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: mostrar imagen en un tamaño pequeño
No me parece buena práctica redimensionar la imagen ya renderizada con código... lo correcto es tener un Thumbnail y si se precisa de ampliar, tener otra de tamaño real...
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #7 (permalink)  
Antiguo 27/12/2013, 03:38
andaluz7
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: mostrar imagen en un tamaño pequeño
hola gracias por las respuestas pero no logro hacerlo
mostro todas las imagene con esto

Código PHP: 
Ver original
  1. <img src='".$fila[5]."'>");

pero nada quiero hacerlo con css
una ayuda gracias
  #8 (permalink)  
Antiguo 27/12/2013, 05:02
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: mostrar imagen en un tamaño pequeño
Podrías hacer un bucle:

Código PHP: 
Ver original
  1. $sql = mysqli_query($conexion, "SELECT imagen FROM tabla")or die(mysqli_error($conexion)); // Esta consulta es un ejemplo tu la sustituyes por la tuya.
  2.  
  3. while($mostrar = mysqli_fetch_assoc($sql)){
  4.       echo " <img src='".$mostrar['imagen']."'> ";
  5. }

Y asín se mostraría repetidamente todos los resultados.
Es un ejemplo sencillo ya tu lo acomodas a tu código.

Felices fiestas.

Saludos.
  #9 (permalink)  
Antiguo 27/12/2013, 05:16
andaluz7
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: mostrar imagen en un tamaño pequeño
gracias por la respuesta pero las imagenes se muestran y quiero que se muestran in un ancho y definido
podrias ayudar me
  #10 (permalink)  
Antiguo 27/12/2013, 05:23
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: mostrar imagen en un tamaño pequeño
Cita:
Iniciado por andaluz7 Ver Mensaje
gracias por la respuesta pero las imagenes se muestran y quiero que se muestran in un ancho y definido
podrias ayudar me
Osea ¿quieres darle un tamaño a la imagen? - Para ello mira la primera respuesta que di.

Código HTML: 
Ver original
  1. <img style="max-width: 50px; max-height: 50px;" src='".$fila[5]."'>

PD: Mira la primera respuesta del tema hay te explico todo.

Si no es a esto a lo que te refieres podrías dar un resumen detallado del problema por favor.

¡Felices fiestas!
Saludos.
  #11 (permalink)  
Antiguo 27/12/2013, 08:03
andaluz7
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: mostrar imagen en un tamaño pequeño
hola no hay manera no puedo hacerlo
este es css de la pagina web


css;

Código PHP: 
Ver original
  1. .contenedor{
  2. width:1000px;margin:0 auto;
  3. background:#ededed;
  4. Border:#3b3b3b 2px solid;
  5. text-align:left
  6. }
  7.     
  8.  
  9.     .barra{
  10. margin: 0px 0px;
  11. padding: 10px 0px;
  12. clear:left;width:100%;
  13. line-height: 10px;
  14. height:20px;
  15. font: 14px/100% Arial, Helvetica, sans-serif; 
  16. color:#fff;
  17. background:#5e85b0;
  18. }
  19.  
  20.     .galeria{
  21. float:left;width:100%;
  22. }
  23.     .imagenes{
  24.     width:100%;
  25. background:#ededed;
  26. height:100%;
  27. margin: 0px 175px 0px 0px;
  28. }
  29.     
  30. .ftp_area{
  31. padding: 0 0 5px 0;
  32.     float:RIGHT;
  33.     font-size: 12px;
  34.     background:#1885c1;
  35.     -moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
  36.     }
  37.  
  38. .Galeria_titulo {
  39.     padding: 0 0 5px 0;
  40.     margin: 0 0 2px 0;
  41.     font-size: 24px;
  42.     font-weight: bold;
  43.     color:#002c85;
  44.     border-bottom: 1px solid #4d4d4d;
  45. }
  46. strong{
  47. float:left;
  48. width:96%;
  49. height: 22px;
  50. padding: 7px;
  51. font: 18px/100% Arial, Helvetica, sans-serif;
  52. color:#000;
  53. text-shadow: 0 1px 1px rgba(0,0,0,.3); 
  54. background:#5e85b0;
  55. }
  56. p{
  57. background:#5e85b0;
  58. padding: 0px;
  59. -moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; 
  60. }
  61.  
  62. .menu{
  63. padding: 5px 10px;
  64. text-align:left;
  65. font: 14px/100% Arial, Helvetica, sans-serif; 
  66. color:#FFF;
  67. background:#000;
  68. }
  69. .menu:hover{
  70. color:#fff;
  71. background:#0E4a7c;
  72. }
  73.  
  74. a{padding:5px; text-decoration:none; color:#002c85;}
  75. img{
  76. border:0px;}
  77. img{
  78. -webkit-transform:scale(0.8);
  79.  
  80.  
  81. -webkit-transition-duration: 0.5s;
  82.  
  83.  
  84.  
  85. margin: 0 10px 5px 0;
  86. }
  87. img:hover{
  88. -webkit-transform:scale(1.1);
  89. -moz-transform:scale(1.1);
  90. -o-transform:scale(1.1);
  91. box-shadow:0px 0px 30px gray;
  92. -webkit-box-shadow:0px 0px 30px gray;
  93. -moz-box-shadow:0px 0px 30px gray;
  94. opacity: 1;
  95. }


esta es la pagina

index.php


Código PHP: 
Ver original
  1. <!--HTML5-->
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" /><!--compatibilidad para caracteres especiales-->
  6.     <title>Galeria de imagenes</title>
  7.     <link rel="stylesheet" href="./css/estilo.css" type="text/css" media="screen" /><!--conexion al estilo-->
  8. </head>
  9. <body>
  10.  
  11.  
  12.  
  13. <div class="contenedor"><!--clase para englobar la pagina-->
  14.     
  15.  
  16. <br>
  17.  
  18. <a href='altatema.php'><font size='4' color='#0000FF'>Agregar Temas</font> </a></p>
  19.  
  20. <?php
  21.  
  22. if ($abierto = mysql_connect ("localhost","root","7777777")){
  23.  
  24. $leer = "SELECT id,tema,autor,hijos,fecha,ruta FROM temas  WHERE tema<>' '";
  25.  
  26. $datos = mysql_db_query ("far",$leer);
  27.  
  28.  
  29.  
  30.  
  31. while ($fila = mysql_fetch_array ($datos)) {
  32. print ("<a href='listahijos.php?var=$fila[0]'> <img src='".$fila[5]."'>");
  33.  
  34.  
  35.  
  36. }
  37.  
  38. } else {
  39. print ("No se puede conectar. Intente nuevamente");
  40. }
  41. ?>
  42.  
  43.  
  44.  
  45.  
  46. <div class="cabecera"><!--titulo de la pagina-->
  47.     <div class="ftp_area"><!--clase para el multiarchivos-->
  48.  
  49.  
  50. </body>
  51. </html>


con esto si visualiza las imagenes bien pero en tamaño original quiero que se muestran en tamaño pequeño
gracias

Código PHP: 
Ver original
  1. <a href='listahijos.php?var=$fila[0]'> <img src='".$fila[5]."'>");
  #12 (permalink)  
Antiguo 27/12/2013, 08:19
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: mostrar imagen en un tamaño pequeño
Prueba con esto:

Código PHP: 
Ver original
  1. <!--HTML5-->
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" /><!--compatibilidad para caracteres especiales-->
  6.     <title>Galeria de imagenes</title>
  7.     <link rel="stylesheet" href="./css/estilo.css" type="text/css" media="screen" /><!--conexion al estilo-->
  8. </head>
  9. <body>
  10.  
  11.  
  12.  
  13. <div class="contenedor"><!--clase para englobar la pagina-->
  14.     
  15.  
  16. <br>
  17.  
  18. <a href='altatema.php'><font size='4' color='#0000FF'>Agregar Temas</font> </a></p>
  19.  
  20. <?php
  21.  
  22. if ($abierto = mysql_connect ("localhost","root","7777777")){
  23.  
  24. $leer = "SELECT id,tema,autor,hijos,fecha,ruta FROM temas  WHERE tema<>' '";
  25.  
  26. $datos = mysql_db_query ("far",$leer);
  27.  
  28.  
  29.  
  30.  
  31. while ($fila = mysql_fetch_array ($datos)) {
  32. print ("<a href='listahijos.php?var=$fila[0]'> <img style='max-width: 50px; max-height: 50px;' src='".$fila[5]."'>");
  33.  
  34.  
  35.  
  36. }
  37.  
  38. } else {
  39. print ("No se puede conectar. Intente nuevamente");
  40. }
  41. ?>
  42.  
  43.  
  44.  
  45.  
  46. <div class="cabecera"><!--titulo de la pagina-->
  47.     <div class="ftp_area"><!--clase para el multiarchivos-->
  48.  
  49.  
  50. </body>
  51. </html>

Sólo cambié esta línea:

Código PHP: 
Ver original
  1. while ($fila = mysql_fetch_array ($datos)) {
  2. print ("<a href='listahijos.php?var=$fila[0]'> <img style='max-width: 50px; max-height: 50px;' src='".$fila[5]."'>");
  3.  
  4.  
  5.  
  6. }

Si te fijas le añadí algo a la etiqueta img.
Las medidas del max-width, y max-height se las cambis por las que tu quieras.

¡Felices fiestas!
Saludos.
  #13 (permalink)  
Antiguo 27/12/2013, 08:33
andaluz7
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: mostrar imagen en un tamaño pequeño
gracias tsg solucionado gracias por tu ayuda
  #14 (permalink)  
Antiguo 04/01/2014, 20:31
 
Fecha de Ingreso: enero-2014
Mensajes: 1
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: mostrar imagen en un tamaño pequeño
tengo un formulario el cual debe subir varias imágenes al mismo tiempo y rediemensionar las imagenes y en otro archivo (guardar_imagenes.php) tambien tengo una libreria con una funcion para cargar las imagenes si las sube y todo pero no las rediemensiona
1. forulario para subir img
<form action="guardar_img.php" method="post" name="Anadir" id="Anadir" enctype="multipart/form-data" >
<tr>
<td align="center" width="33%" height="30" valign="middle"> <font color="#424242" face="Arial" size="4">Foto 1 :</font>
<input size="30" name="Foto1" type="file" ="archivo[]" required/></td>
</tr><tr>
<td align="center" width="33%" height="30" valign="middle"><font color="#424242" face="Arial" size="4">Foto 2 :</font>
<input size="30" name="Foto2" type="file" id="Foto2" /></td>
</tr><tr>
<td align="center" width="34%" height="30" valign="middle"><font color="#424242" face="Arial" size="4">Foto 3 :</font>
<input size="30" name="Foto3" type="file" id="Foto2" /></td>
</tr><tr>
<td align="center" height="30" valign="middle"><font color="#424242" face="Arial" size="4">Foto 4 :</font>
<input size="30" name="Foto4" type="file" id="Foto2" /></td>
</tr><tr>
<td align="center" height="30" valign="middle"><font color="#424242" face="Arial" size="4">Foto 5 :</font>
<input size="30" name="Foto5" type="file" id="Foto2" /></td>
</tr>
<tr>
<td align="center" height="30" valign="middle"><font color="#424242" face="Arial" size="4">Foto 6 :</font>
<input size="30" name="Foto6" type="file" id="Foto2" /></td>
</tr>
</form>

2. libreria imagenes
<?php /*************************** F U N C I O N P A R A C A R G A R I M A G E N E S ***************************/
//$IMG2 = CargarImagen($_FILES['Foto2'], $Correo."/".$FOLIO."2");
function CargarImagen($Archivo, $URL) //Pasamos el dato $_FILES y la direccion de la carpeta dnd estará la imagen
{
echo "Archivo== "; echo $Archivo;
echo "Url == ";echo $URL;
$NAME_IMG = $Archivo['name']; //Obtenemos el nombre de las imagenes
$tmp = $Archivo['tmp_name']; //Obtenemos el temporal del archivo

$ext_archivo = pathinfo($NAME_IMG); //Extrae la informacion del archivo
$exts_validas = array("PNG","png","jpg","gif","JPG","JPEG","jpeg") ; //Fijamos las extensiones validas para las imagenes
$Tipo_ext = ObtenerExtension($NAME_IMG); //Obtenemos el tipo de extension del archivo

$URL = $URL.$Tipo_ext; //Creamos las url para los archivos
$Error = 0; //Una bandera para detectar errores
//Foto1
if(is_uploaded_file($tmp)) //Si el temporal existe
{
if(array_search($ext_archivo['extension'], $exts_validas)) //Valida si tiene la extension adecuada
copy($tmp, "../../ImagenesAnuncios/".$URL); //Copia el archivo en la carpeta especificada
else $Error = 2; //Si el archivo no coincide con el tipo nos devuelve un error
}
else $Error = 1; //Si el primer temporal no se cargo manda el aviso
if($Error == 1) return "Error, el temporal no existe";
else if($Error == 2) return "Error, extensión inadeacuada" ;
else if($Error == 0) return $URL;
}

/***************************** F U N C I O N P A R A D E T E C T A R E R R O R *****************************/

function DetectarError($Error) {
if($Error == "Error, el temporal no existe") return 0;
elseif($Error == "Error, extensión inadeacuada") return -1;
else { return 1; }
}

/************************ F U N C I O N P A R A O B T E N E R E X T E N S I O N E S ************************/

function ObtenerExtension($cadena)
{
$Tam_Cadena = strlen($cadena);

for($cont = $Tam_Cadena; $cont >= 0; $cont--)
{
if($cadena[$cont] != '.'){
$Extension = $cadena[$cont].$Extension;
}
else {
$Extension = $cadena[$cont].$Extension;
$cont = 0;
}
}
return $Extension;
}
?>

3. guardar_img.php
$IMG1 = CargarImagen($_FILES['Foto1'], $id_empresa."/".$folio."1"); //La funcion CargarImagen() devuelve la URL si se pudo llevar acabo la carga del archivo
$IMG2 = CargarImagen($_FILES['Foto2'], $id_empresa."/".$folio."2");
$IMG3 = CargarImagen($_FILES['Foto3'], $id_empresa."/".$folio."3");
$IMG4 = CargarImagen($_FILES['Foto4'], $id_empresa."/".$folio."4");
$IMG5 = CargarImagen($_FILES['Foto5'], $id_empresa."/".$folio."5");
$IMG6 = CargarImagen($_FILES['Foto6'], $id_empresa."/".$folio."6");

Posteriormente hago el insert a la TB imagenes de mi BD

Pero no se como poner que las imagenes se redimensionen desde que el usuario las esta subiendo

Alguien me puede ayudar ???

desde ya se los agradezco infinitamente

Etiquetas: fecha, html, mysql, pequeño, select, tamaño
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:11.