Fijar tamaño Celda/foto

[miriamgomez]

Hola:

Estoy elaborando un formulario para mostrar una serie de articulos, que tengo en una base de datos.

Utilizo una tabla, y una de las celdas es una foto.

El problema viene que tengo que fijar el tamaño de una foto en una celda. Se tiene que mantener la proporcion de las imagenes y que la celda no exceda de 200px de ancho

Alguna idea?

Un saludo

[abimaelrc]

Trata esto http://www.forosdelweb.com/f68/aport...agenes-912637/ y mira el quinto ejemplo a ver si te ayuda.

[Hugo_Euan]

=D jejeje, bueno pues como te dije... si estas usando PHP para imprimir las imagenes que me imagino que si, por que las estas obteniendo de una BD puedes hacer uso de esta funcion...

Código PHP:

function imageResize($width, $height, $_MaxWidth, $_MaxHeight, $OtherPass) {
        if ($width > $height) {
            $percentage = ($_MaxWidth / $width);
        } else {
            $percentage = ($_MaxHeight / $height);
        }
            $width = round($width * $percentage);
            $height = round(($height * $percentage));
            if($width > $_MaxWidth){
                $TempWidth = ($width - $_MaxWidth);
                $width = ($width - $TempWidth);
                $height = ($height - $TempWidth);
            }
            if($height > $_MaxHeight){
                $TempHeight = ($height - $_MaxHeight);
                $height = ($height - $TempHeight);
                $width = ($width - $TempHeight);
            }
            if($OtherPass){
                imageResize($width, $height, $_MaxWidth, $_MaxHeight, false);
            }
            return "width=\"$width\" height=\"$height\"";
}
 

lo que hace esta funcion es ajustar las dimensiones de una imagen a un contenedor, en este caso tu celda de 200px...

los parametros que recibe esta funcionn son:

- El ancho de la imagen
- El alto de la imagen
- El Anchio maximo en tu caso 200px
- El alto Maximo si no tienes puedes ponerle 10px por ejemplo..
- Valor Boleano que indica si se hace una segunda pasada....

para usarla solo necesitas obtener el tamaño de la imagen....
y para hacer eso puedes hacer uso de la funcion de PHP getimagesize
por ejemplo...

Código PHP:

$src = "Ruta de tu imagen"
 
$tamano = getimagesize($src);
 
$reducir = imageResize($tamano[0], $tamano[1], 200, 10, true);
 
echo '<table>
   <tr>
      <td width="200">'.<img src=\''.$src.'\' '.$reducir.' />.'</td>
      <td>informacion</td>
      <td>informacion</td>
      <td>informacion</td>
   </tr>
</table>';
 

con esto tus imagenes se ajustaran a tu contenedor de 200px =D

cualquier duda que tengas comenta =D

[abimaelrc]

@Hugo_Euan, el único problema que veo es que si la imagen es grande, el redimensionar solo lo que hace es colocar la imagen de los mismo pixeles más pequeña. Que si tiene muchos kb o tal vez mb, va a tener que cargar todo eso, lo mejor sería convertirla en pequeña usando por ejemplo el quinto ejemplo que indiqué para que así cargue de acuerdo al tamaño que desea y así no se carga bytes demás. Pero lo que indicaste es una forma de hacerlo también.

[Hugo_Euan]

abimaelrc te toda la razón la imagen conserva su tamaño en KB original...
pero sabias que al hacer un parse de imagen con PHP haces que dicha imagen pierda su calidad ?
en ámbito de diseño eso no es correcto, por lo que la solución que yo uso es redimensionar la imagen, mas no hacerle un parse...

sin embargo, a mi manera de pensar no es una problematica, debido a que las conexiones recientes no son tan lentas como las de antes. una imagen de 3000px por 2000px puede pesar hasta 253 KB y el tiempo de carga puede ser de .8 ms
yo no le veo algun problema, pero pues es cuestion de cada quien =D
respeto muchisimo tu manera de pensar =D

[abimaelrc]

Iniciado por Hugo_Euan

pero sabias que al hacer un parse de imagen con PHP haces que dicha imagen pierda su calidad ?

Ahhh claro, se pierde seguro que sí. Pero entiendo que pasaría lo mismo si se redimensiona. Aunque he hecho varias pruebas con el código que brindé que no he visto mucha perdida o no se nota la perdida, digo es lo que he notado hasta ahora.

Iniciado por Hugo_Euan

sin embargo, a mi manera de pensar no es una problematica, debido a que las conexiones recientes no son tan lentas como las de antes.

El problema ya no sería de la conexión mayormente, sino al bandwidth que algunos hosting imponen.

Solo fue una observación, por si miriamgomez no lo tenía pensando

[Hugo_Euan]

Iniciado por abimaelrc

Ahhh claro, se pierde seguro que sí. Pero entiendo que pasaría lo mismo si se redimensiona. Aunque he hecho varias pruebas con el código que brindé que no he visto mucha perdida o no se nota la perdida, digo es lo que he notado hasta ahora.


El problema ya no sería de la conexión mayormente, sino al bandwidth que algunos hosting imponen.

Solo fue una observación, por si miriamgomez no lo tenía pensando

Nop, en realidad no pasa lo mismo al redimensionar una imagen que al quitarle proporcion...
al quitarle proporcion naturalmente le quitas DPI a las imagenes, es por eso que por ejemplo cuando una imagen es pequeña y la escalas a mas grande se pixelea, en cambio si una imagen solo se redimensiona esta mantiene su proporcion...
Tal vez para nuestros ojos no se vea la perdida de resolucion, pero creeme que para un experto en diseño eso no se le escapa...
asi fue que aprendi lo que te digo, jajaja, por que amis jefes de diseño no se les escapa ni 1 misero pixel...

y con respecto a lo del ancho de banda (bandwith) pues cualquier host da suficiente ancho de banda para poder cargar imagenes con maginitudes grandes de resolucion...
pero bueno. vuelvo a lo mismo, cualquier aporte es bueno y las ideas son respetadas =D

[Hugo_Euan]

Código PHP:

<?php 
//mostramos todos nuestros 
//artículos, viendo si han 
//sido agregados o no a nuestro 
//carro de compra 
//y hacemos la consulta 
 
$registros = 6;
$SrcImg = ''; //agregue esta variable que es donde asignaremos la ruta de la imagen =D
$ScaleImg = ''; //esta variable obtendra el nuevo ancho y alto de tu imagen...
if(!$_GET['pagina']){
$inicio = 0;
$_GET['pagina'] = 1;
}else{
$inicio = ($_GET['pagina'] - 1) * $registros;
}
 
$resultados = mysql_query("SELECT * FROM directorio where categoria='$categoria'order by id asc");
$total_registros = mysql_num_rows($resultados); 
$resultados = mysql_query("SELECT * FROM directorio where categoria='$categoria'order by id asc LIMIT $inicio, $registros");
$total_paginas = ceil($total_registros / $registros);
 
$qry=$resultados;
 
while($row=mysql_fetch_assoc($qry)){ 
$SrcImg = '../'.$row['url']; //Aquí asignamos la ruta de la imagen que obtuvimos de la Base de Datos =D
                       //como esta dentro del while cada vez que se recorra un resultado se le asigna a $SrcImg =P
                      
$ImgSize = getimagesize($SrcImg); /* $ImgSize es la variable que recibirá el alto y el ancho original de la 
imagen, como te daras cuenta a la funcion de PHP getimagesize le pasamos como parametro la ruta de la imagen obtenida de la BD.
una vez hecho esto ya podemos usar la funcion que te mostre...
$ImgSize[0] <--- esto representa el ancho de la imagen original
$ImgSize[1] <--- esto representa el alto de la imagen origina */
 
//$ScaleImg obtiene el nuevo alto y ancho proporcional a 200px
$ScaleImg = imageResize($ImgSize[0], $ImgSize[1], 200, 125, true); /* el 200 es el ancho de tu contenedor, osea tu celda 200px
y el alto es 125, tu imagen se ajustara
proporcionalmente... pruebalo y veras =D */
 
 
// Esta funcion es la que se encarga de redimensionar la imagen, solo recibe 5 parametros, en este caso 
//el ancho y alto de la imagen original, el ancho y alto del contenedor y un boleano para darle una segund pasada =D
function imageResize($width, $height, $_MaxWidth, $_MaxHeight, $OtherPass) {
        if ($width > $height) {
            $percentage = ($_MaxWidth / $width);
        } else {
            $percentage = ($_MaxHeight / $height);
        }
            $width = round($width * $percentage);
            $height = round(($height * $percentage));
            if($width > $_MaxWidth){
                $TempWidth = ($width - $_MaxWidth);
                $width = ($width - $TempWidth);
                $height = ($height - $TempWidth);
            }
            if($height > $_MaxHeight){
                $TempHeight = ($height - $_MaxHeight);
                $height = ($height - $TempHeight);
                $width = ($width - $TempHeight);
            }
            if($OtherPass){
                imageResize($width, $height, $_MaxWidth, $_MaxHeight, false);
            }
            return "width=\"$width\" height=\"$height\"";
}
?> 
<img src="http://www.forosdelweb.com/f18/objetos/pintando.png">
<div id="tabla">
<div id="tontasup">
</div>
<div id="tontacen">
<table width="580" border="3">
<tr>
<!-- Aqui solo imprimomos la ruta de tu imagen y el valor que obtuvo $ScaleImg, de esta manera tus imagenes se ajustan al contenedor  -->
 
<td rowspan="2" width="200px" height="125px"><img <?php echo 'src="'.$SrcImg.'" '.$ScaleImg; ?>  align="top" ></td>
 
 
<!------------------------------------------------------------------------------------>
 
<td><div align="center">
<h1><?php echo $row['titulo'] ?></h1>
</div></td>
<td width="100"><div align="center"><?php echo $row['codigo'] ?></div></td>
</tr>
<tr> 
<td><div align="center"><font size="+1">Dimensiones: <?php echo $row['dimensiones'] ?></font></div></td>
<td width="150"><div align="center"><font color= #FF0000>Precio: 
<?php echo $row['precio'] ?>€</font></div></td>
</tr>
</table>
 
 
</div>
<div id="tontainf">
</div>
<br>
 
</div>
 
<br><br>
<?php } 
if($_GET['pagina'] > 1) {
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=1'><< Primera</a> ";
}
if($_GET['pagina'] > 2) {
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".($_GET['pagina']-1)."'>< Anterior</a> ";
}
 
for($i=($_GET['pagina']-2); $i <= ($_GET['pagina']+2); $i++){
if(($i > 0) && ($i <= $total_paginas)){
if($_GET['pagina'] == $i){
echo "<b>".$i."</b> "; 
}else{
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=$i'>$i</a> ";
}
}
}
 
if($_GET['pagina'] < ($total_paginas-1)){
echo " <a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".($_GET['pagina']+1)."'>Siguiente ></a>";
}
if($_GET['pagina'] < $total_paginas){
echo " <a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".$total_paginas."'>Últ ima >></a>";
}
?>
 

[Hugo_Euan]

=D espero que sea lo que buscabas amiga Miriam... cuidate mucho =D
y claro que siempre es un buen dia... sientete bien por eso =D

[stramin]

me gustaron las soluciones brindadas por ambos viendo cada posibilidad (redimensionarla al subirla o redimonsionarla al mostrar)

solo me gustaría decir que eviten el repost XD

+karma

[abimaelrc]

Iniciado por stramin

solo me gustaría decir que eviten el repost XD

Me perdí esta parte

[stramin]

lamentablemente XD

ok, ok, ok, hable en plural para que no sonara tan personal, pero me refería a hugo_euan que publicó 3 veces seguidas XD

aún así sus respuestas estuvieron bien :)

ahora que lo pienso, no se llama repost, no se como se llama.... posts dobles?

[Hugo_Euan]

jajajaja, lo siento...
no se como se llame , pero tratare de no hacerlo =P
jajjaaja....

[miriamgomez]

Hola

Gracias por vuestras aportaciones, especialmente a Hugo_Euan, que eres un angel protector.


Supongo que hice algo mal, por que dio esto:


Fatal error: Call to undefined function imageResize() in /var/www/vhosts/xn--sealizacionescampodegibraltar-60c.com/httpdocs/senalizaciones/automovil.php on line 94

Esta es la linea 94:
$ScaleImg = imageResize($ImgSize[0], $ImgSize[1], 200, 125, true); /* el 200 es el ancho de tu contenedor, osea tu celda 200px


Gracias

[Hugo_Euan]

no, nenita, tu no hiciste nada mal, el error fue mio, fijate muy bien en este bloque, puse la funcion dentro del While... es por eso que te marca error...

Código PHP:

while($row=mysql_fetch_assoc($qry)){ 
$SrcImg = '../'.$row['url']; //Aquí asignamos la ruta de la imagen que obtuvimos de la Base de Datos =D
           //como esta dentro del while cada vez que se recorra un resultado se le asigna a $SrcImg =P
           
$ImgSize = getimagesize($SrcImg); /* $ImgSize es la variable que recibirá el alto y el ancho original de la 
imagen, como te daras cuenta a la funcion de PHP getimagesize le pasamos como parametro la ruta de la imagen obtenida de la BD.
una vez hecho esto ya podemos usar la funcion que te mostre...
$ImgSize[0] <--- esto representa el ancho de la imagen original
$ImgSize[1] <--- esto representa el alto de la imagen origina */
 
//$ScaleImg obtiene el nuevo alto y ancho proporcional a 200px
$ScaleImg = imageResize($ImgSize[0], $ImgSize[1], 200, 125, true); /* el 200 es el ancho de tu contenedor, osea tu celda 200px
y el alto es 125, tu imagen se ajustara
proporcionalmente... pruebalo y veras =D */
 
 
// Esta funcion es la que se encarga de redimensionar la imagen, solo recibe 5 parametros, en este caso 
//el ancho y alto de la imagen original, el ancho y alto del contenedor y un boleano para darle una segund pasada =D
function imageResize($width, $height, $_MaxWidth, $_MaxHeight, $OtherPass) {
    if ($width > $height) {
      $percentage = ($_MaxWidth / $width);
    } else {
      $percentage = ($_MaxHeight / $height);
    }
      $width = round($width * $percentage);
      $height = round(($height * $percentage));
      if($width > $_MaxWidth){
        $TempWidth = ($width - $_MaxWidth);
        $width = ($width - $TempWidth);
        $height = ($height - $TempWidth);
      }
      if($height > $_MaxHeight){
        $TempHeight = ($height - $_MaxHeight);
        $height = ($height - $TempHeight);
        $width = ($width - $TempHeight);
      }
      if($OtherPass){
        imageResize($width, $height, $_MaxWidth, $_MaxHeight, false);
      }
      return "width=\"$width\" height=\"$height\"";
}
 

La funcion imageResize debe estar fuera del while... así =D

Código PHP:

<?php 
//mostramos todos nuestros 
//artículos, viendo si han 
//sido agregados o no a nuestro 
//carro de compra 
//y hacemos la consulta 
 
$registros = 6;
$SrcImg = ''; //agregue esta variable que es donde asignaremos la ruta de la imagen =D
$ScaleImg = ''; //esta variable obtendra el nuevo ancho y alto de tu imagen...
if(!$_GET['pagina']){
$inicio = 0;
$_GET['pagina'] = 1;
}else{
$inicio = ($_GET['pagina'] - 1) * $registros;
}
 
 
// Esta funcion es la que se encarga de redimensionar la imagen, solo recibe 5 parametros, en este caso 
//el ancho y alto de la imagen original, el ancho y alto del contenedor y un boleano para darle una segund pasada =D
 
function imageResize($width, $height, $_MaxWidth, $_MaxHeight, $OtherPass) {
    if ($width > $height) {
      $percentage = ($_MaxWidth / $width);
    } else {
      $percentage = ($_MaxHeight / $height);
    }
      $width = round($width * $percentage);
      $height = round(($height * $percentage));
      if($width > $_MaxWidth){
        $TempWidth = ($width - $_MaxWidth);
        $width = ($width - $TempWidth);
        $height = ($height - $TempWidth);
      }
      if($height > $_MaxHeight){
        $TempHeight = ($height - $_MaxHeight);
        $height = ($height - $TempHeight);
        $width = ($width - $TempHeight);
      }
      if($OtherPass){
        imageResize($width, $height, $_MaxWidth, $_MaxHeight, false);
      }
      return "width=\"$width\" height=\"$height\"";
}
 
$resultados = mysql_query("SELECT * FROM directorio where categoria='$categoria'order by id asc");
$total_registros = mysql_num_rows($resultados); 
$resultados = mysql_query("SELECT * FROM directorio where categoria='$categoria'order by id asc LIMIT $inicio, $registros");
$total_paginas = ceil($total_registros / $registros);
 
$qry=$resultados;
 
while($row=mysql_fetch_assoc($qry)){ 
$SrcImg = '../'.$row['url']; //Aquí asignamos la ruta de la imagen que obtuvimos de la Base de Datos =D
           //como esta dentro del while cada vez que se recorra un resultado se le asigna a $SrcImg =P
           
$ImgSize = getimagesize($SrcImg); /* $ImgSize es la variable que recibirá el alto y el ancho original de la 
imagen, como te daras cuenta a la funcion de PHP getimagesize le pasamos como parametro la ruta de la imagen obtenida de la BD.
una vez hecho esto ya podemos usar la funcion que te mostre...
$ImgSize[0] <--- esto representa el ancho de la imagen original
$ImgSize[1] <--- esto representa el alto de la imagen origina */
 
//$ScaleImg obtiene el nuevo alto y ancho proporcional a 200px
$ScaleImg = imageResize($ImgSize[0], $ImgSize[1], 200, 125, true); /* el 200 es el ancho de tu contenedor, osea tu celda 200px
y el alto es 125, tu imagen se ajustara
proporcionalmente... pruebalo y veras =D */
 
?> 
<img src="http://www.forosdelweb.com/f18/objetos/pintando.png">
<div id="tabla">
<div id="tontasup">
</div>
<div id="tontacen">
<table width="580" border="3">
<tr>
<!-- Aqui solo imprimomos la ruta de tu imagen y el valor que obtuvo $ScaleImg, de esta manera tus imagenes se ajustan al contenedor -->
 
<td rowspan="2" width="200px" height="125px"><img <?php echo 'src="'.$SrcImg.'" '.$ScaleImg; ?> align="top" ></td>
 
 
<!------------------------------------------------------------------------------------>
 
<td><div align="center">
<h1><?php echo $row['titulo'] ?></h1>
</div></td>
<td width="100"><div align="center"><?php echo $row['codigo'] ?></div></td>
</tr>
<tr> 
<td><div align="center"><font size="+1">Dimensiones: <?php echo $row['dimensiones'] ?></font></div></td>
<td width="150"><div align="center"><font color= #FF0000>Precio: 
<?php echo $row['precio'] ?>€</font></div></td>
</tr>
</table>
 
 
</div>
<div id="tontainf">
</div>
<br>
 
</div>
 
<br><br>
<?php } 
if($_GET['pagina'] > 1) {
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=1'><< Primera</a> ";
}
if($_GET['pagina'] > 2) {
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".($_GET['pagina']-1)."'>< Anterior</a> ";
}
 
for($i=($_GET['pagina']-2); $i <= ($_GET['pagina']+2); $i++){
if(($i > 0) && ($i <= $total_paginas)){
if($_GET['pagina'] == $i){
echo "<b>".$i."</b> "; 
}else{
echo "<a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=$i'>$i</a> ";
}
}
}
 
if($_GET['pagina'] < ($total_paginas-1)){
echo " <a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".($_GET['pagina']+1)."'>Siguiente ></a>";
}
if($_GET['pagina'] < $total_paginas){
echo " <a href='http://www.señalizacionescampodegibraltar.com/senalizaciones/".$pagina.".php?pagina=".$total_paginas."'>Últ ima >></a>";
}
?>
 

ahora pruebalo y me dices que tal =P
y gracias por lo de angelito =P

[miriamgomez]

Hola casi perfecto¡¡¡¡¡

Pero me salen dos imagenes, una bien, pero arriba me sale un cuadaradito con un aspa ( como si no exisitiera la imagen)


Un saludo

[Hugo_Euan]

Iniciado por miriamgomez

Hola casi perfecto¡¡¡¡¡

Pero me salen dos imagenes, una bien, pero arriba me sale un cuadaradito con un aspa ( como si no exisitiera la imagen)


Un saludo

Cuando eso sucede, y no carga la imagen es por que la imagen y/o el formato de imagen no son validos...

=D

[solhdeck]

Muchas respuestas, la más básica es que, en html, desde hace tiempo, si marcas solo el ancho te mantiene las proporciones

Código PHP:

  echo "<img src=\"$imagen\" width=200 />";  
   

La historia se complica si la imagen mide menos de 200 de ancho y quieres que en ese caso no te la redimensione

[Hugo_Euan]

Amiga Miriam, le di un vistazo mas a tu codigo y tal vez la razon por la que te sale esa aspa en tu codigo es este fragmento de código que tienes...

<img src="http://www.forosdelweb.com/f18/objetos/pintando.png">

quitaselo a tu documento y ya no te debe salir =D

[Hugo_Euan]

Stream perdon por este repost XD... pero era necesario jejej =P

le doy toda la razón a solhdeck en html si tu defines el ancho de una imagen automaticamente el alto es proporcional... y como bien dice, la complicacion viene si la imagen es menor a 200px.. por que lo que hará HTML es aumentar esa imagen a 200px y la altura a proporcion...

lo cual no sucede con el códico que tiene Miriam... =D
la funcion identifica que es mayor al contenedor, el alto o el ancho ??
y efectua operaciones básicas para redimensionar...
si ni el alto ni el ancho es mayor al contenedor la imagen conserva su tamaño original =D

[miriamgomez]

Gracias a todos, ya funciona¡¡¡¡

Pero permitirme agradecerle especialmente a Hugo_Euan por su enorme paciencia conmigo.

Eres el "puto Amo" jajajjajaja

Un saludo

[stramin]

Iniciado por Hugo_Euan

Stream perdon por este repost XD... pero era necesario jejej =P

recuerda que no se llama repost, no sabemos como se llama.

El método de elegir el ancho no evitará el primer problema, que ocupe espacio innecesario en el servidor y demore en cargar, recuerda eso que fue la razón por la que abimaelrc cambió el código.

[Hugo_Euan]

Tienes razon Stramin no sabemos como se llama... en fin.. jajaj...

y lo demas pues me perdi...