Cual es la manera correcta de programar print de imagen?

hoberwilly · #1 (**permalink**) 25/05/2009, 13:18

Hola amigos, quisiera realizar la consulta de que manera puedo corregir la manera de imprimir una imagen en mi pagina.
Tengo esto:
1. esta es la cabecera de mi pagina:

Código php:

Ver original<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
  <td colspan="8" width="100%"><img src="img/LOGO.jpg" width="1000" height="118"></td>
</tr>
</tr>
</table>

2. El logo esta en formato jpeg y tiene las sgtes dimensiones: 4547x580 y de tamaño 305 kb
Realizo esta consulta debido a k tengo sugerencias de k algunos amigos visitan mi pagina y visualizan de manera distorcionada esta imagen, en algunos no cuadran en la vista al monitor, cosa k en mi pc se ve correctamente???

Gracias de antemano,

webxedo · #2 (**permalink**) 25/05/2009, 13:53

La manera de colocar la etiqueta IMG en HTML es de la siguiente manera:

Todos los caracteres en minisculas y poner las medidas que indicas, algo asi te quedaría:

Código:

<img src="img/logo.jpg" width="4547" height="580" />

Saludos

hades87 · #3 (**permalink**) 25/05/2009, 16:02

Esa no es la forma correcta, la ideal es:

Código HTML:

<img src="ruta" style="width:anchura;height:altura" />

de esta forma repetas estándares y a la W3C

hoberwilly · #4 (**permalink**) 25/05/2009, 16:44

Estimados amigos,
segui lo sugerido probando asi:
1. <img src="img/LOGO.jpg" style="width:1000;height:118">
2. <img src="img/LOGO.jpg" style="width:4547;height:580">

Para los dos casos, como en su momento comente que no cuadran en la pantalla del monitor...ya sucede esto para mi caso cosa k no tenia yo este incoveniente.

Gracias por las sugerencias que me puedan dar...

hades87 · #5 (**permalink**) 25/05/2009, 16:47

piensa que esas resoluciones tiene mucha anchura y por lo tanto dependiendo de la resolucion de monitor que tenga la persona que lo ve no se le vera toda la imagen de un pantallazo

jonak · #6 (**permalink**) 25/05/2009, 18:02

Si no pones el "px" junto al tamaño no funciona.

<img src="img/LOGO.jpg" style="width:4547px;height:580px">

hoberwilly · #7 (**permalink**) 26/05/2009, 07:49

Buen día amigos,
Probe lo sugerido por hades 87 y jonak...

<img src="img/LOGO.jpg" style="width:1000px;height:118px">

en mi monitor se ve perfectamente (ancho y alto se ajusta al mio)...pero como dice hades87:

...dependiendo de la resolucion de monitor que tenga la persona que lo ve no se le vera toda la imagen de un pantallazo...

eso mismo quisiera saber como programar para que el print de esta imagen (que visualizo en mi monitor) se visualize oka en cualquier monitor que tenga diferentes resoluciones???Es posible esto???

Gracias de antemano,

David · #8 (**permalink**) 26/05/2009, 07:53

¿Te refieres a ajustar la imagen a la ventana? En ese caso debes usar porcentajes:

Código:

width: 100%;

hoberwilly · #9 (**permalink**) 26/05/2009, 13:07

Gracias David por la respuesta...
pero cabezon xque no doy con la solucion

1. entiendo que al colocar:
<tr>
<td colspan="8" width="100%"><img src="img/LOGO.jpg" style="width:100%;height:100%"></td>
</tr>

me imprimira la imagen al 100% en sus dos dimensiones (ancho y alto), y esto es cierto porque la imagen al tener dimensiones: 4547x580 y de tamaño 305 kb....asi se visualiza en el monitor una parte de la imagen en mencion.

2. Ahora intente x una regla simple asi:
<tr>
<td colspan="8" width="100%"><img src="img/LOGO.jpg" style="width:22%;height:20%"></td>
</tr>
<tr>
<td height="32" width="14%" align="center">B</td>
<td align="center" valign="middle" width="10%">a</td>
<td align="center" width="12%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="12%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="22%">a</td>
</tr>

asi se ve con los tags td ensanchados a la derecha, xq:
a. el scroll horizontal esta activo
b. la imagen se ajusta al monitor pero existe un espacio (aprox el 68% restante) el cual se visualiza en blanco con el scroll a l aderecha.

Gracias de antemano

David · #10 (**permalink**) 26/05/2009, 13:12

No entendí tu pregunta. Cuando usas porcentajes (en este caso 100%) la imagen se estira (o reduce) para ocupar el x% del elemento que lo contiene.

hoberwilly · #11 (**permalink**) 26/05/2009, 13:23

Hola David,
a ver a tu pregunta cuando uso porcentajes de 100% la imagen se posiciona en sus dimensiones nativas: dimensiones: 4547x580.
Por tanto la vista en el monitor se estira.

Gracias,

David · #12 (**permalink**) 26/05/2009, 13:27

No, no es que las imágenes se estiren a sus dimensiones "nativas", se estiran hasta ocupar todo el ancho/alto de su contenedor.

hoberwilly · #13 (**permalink**) 26/05/2009, 13:40

mmm oka, entonces para entender...el contenedor de la imagen seria el tag td??
<td colspan="8" width="100%"><img src="img/LOGO.jpg"...></td>

Saludos,

hades87 · #14 (**permalink**) 26/05/2009, 13:48

diría que si, ya que desbordarlo no puede, por que dices que ocupe el 100%, por lo tanto es todo el ancho de la celda.

Por eso sería conveniente diseñar la web con htmly css

hoberwilly · #15 (**permalink**) 26/05/2009, 13:59

Este es mi codigo:
tengo un index:
<?php include("include/cabecera.php"); ?>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<td valign="top"><br>
<?php
if($p==1){
include("include/a.php");
}elseif($p==2){
include("include/b.php");
}else{
include("include/c.php");
}
?>
</td>
</table>
<br><?php include("include/pie.php"); ?>
</body>
</html>

y en la cabecera tengo la imagen en mencion:
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<td colspan="8" width="100%"><img src="img/LOGO.jpg" style="width:100%;height:100%"></td>
</tr>
<tr>
<td height="32" width="14%" align="center">B</td>
<td align="center" valign="middle" width="10%">a</td>
<td align="center" width="12%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="12%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="10%">a</td>
<td align="center" width="22%">a</td>
</tr>
</table>

En algo estoy equivocado, que estoy ignorando???

Gracias,

hades87 · #16 (**permalink**) 26/05/2009, 14:57

Es necesariá esa estructura de tablas? es que no veo con claridad qeu es lo que intentas lograr ademas de que sería mucho mas simple con css.

la imagen te ocupa toda la celda?

hoberwilly · #17 (**permalink**) 26/05/2009, 15:07

Bien hades87, x lo que veo entonces no hay nada k hacer...
entonces por favor a la persona autorizada derivar al foro del css para realizar mis consultas.

Gracias

kseso? · #18 (**permalink**) 26/05/2009, 18:17

Hola Hoberwilly.
A ver si te he comprendido bien. Ya me dirás:
Tienes una imagen de unas dimensiones 4547 * 580 px (bastantes considerables, por cierto)
A esta imagen le dices al navegador que la redimensione para mostrarla en la pantalla a 1000 *118 px:
<img src="img/LOGO.jpg" width="1000" height="118" /> (el tag img hay que cerrarlo con " />")

¿A qué te refieres con:

Cita:

... la visualizan de manera distorsionada esta imagen, en algunos no cuadran en la vista al monitor

¿distorsionada es deformada, aplastada? eso es porque no has reducido en la misma proporción el alto y ancho. Hay una diferencia entre la relación 4547/1000 y 589/118

Cuadrar la vista en el monitor: ¿te refieres a centrar horizontalmente tu imagen en su pantalla?
Mira tu estructura y mis comentarios:

Código html:

Ver original<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<!-- el ancho 100% de su padre, en este caso sería el body -->
<tr>
  <td colspan="8" width="100%"><img src="img/LOGO.jpg" width="1000" height="118" />
<!-- el 100% de la tabla= 100% body pero la imagen mide 1000px ¿qué ocurre si la ventana es de 800px o de 1280px? -->
</td>
</tr>
<!-- siguen más celdas -->
</table>

¿O cuadrar es que la imagen se adapte sin deformarse a la celda sea cual sea su tamaño?

No se si estas reflexiones te serán de ayuda, pues no acabo de comprender la naturaleza del problema y cómo es "verse correctamente en tu monitor".

Un saludo

Corneja · #19 (**permalink**) 27/05/2009, 00:57

Haz caso a hades y trata de quitar las tablas, la programación es mucho más facil con div y css y así además cumplirás con los estándares

hoberwilly · #20 (**permalink**) 27/05/2009, 08:58

A tus sugerencias respondo:
1. Efectivamente las dimensiones de mi imagen son 4547 * 580 px
2. Es correcto:
<td colspan="8" width="100%"><img src="img/LOGO.jpg" width="1000" height="118"></td>
3. Compañeros mios visualizan la pagina (cuentan monitores de diferente resolucion que el mio) y la imagen:
a. disculpa que me exprese mal...no se distorciona xq no se distorciona ni se aplasta
b. sino que no encaja a todo el ancho de estos monitores

Quisiera como dije antes: ...quisiera saber como programar para que el print de esta imagen (que visualizo en mi monitor) se visualize oka en cualquier monitor que tenga diferentes resoluciones???...

Espero haber explicado mi problema, caso contrario estare a la expectactiva a tus recomendaciones ...gracias de antemano kseso? por la ayuda brindada

kseso? · #21 (**permalink**) 27/05/2009, 09:22

Gracias Hoberwilly por las aclaraciones.

Mira a ver si esta respuesta de Mikmoro en otro hilo es de aplicación a tu problema:

Cita:

Iniciado por Mikmoro

Prueba a ponerle a esa tabla table-layout="fixed" (sic), porque impide que la tabla se redibuje adaptándose automáticamente al tamaño del contenido.

Un saludo

hoberwilly · #22 (**permalink**) 27/05/2009, 15:50

Gracias por el link kseso?, ya implemente lo sugerido por Mikmoro:
.imagen_caprichosa{
table-layout: fixed;
}

y en el tag table coloque class="imagen_caprichosa"
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="imagen_caprichosa">
<tr>
<td colspan="8" width="100%"><img src="img/LOGO.jpg" style="width:100%;height:100%"></td>
</tr>

hasta el momento no tengo ningún incoveniente en mi monitor...probare en otros monitores con diferentes resoluciones y comento lo ocurrido.

Gracias otra vez...

kseso? · #23 (**permalink**) 27/05/2009, 16:05

Nah... las gracias ya sabes a quien corresponden en este caso. Al Capo

hoberwilly · #24 (**permalink**) 28/05/2009, 10:31

Que bueno ...hasta donde he podido consultar va bien (caso contrario no dudes en que estoy por aca para realizar mi consulta)

pero lo malo es que tengo un problemita k tiene k ver mucho con este tema y aprovecho de la sgte. manera:
1. Tengo un listado de productos el cual uso una galeria de imagenes
2. Estas imagenes estan contenidas en el tag <td>

Muestro el codigo para ayuda:

Código php:

Ver original<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" align="center" class="tablita">     
<tr>
  <?php
  while($row=mysql_fetch_array($_pagi_result)){
    $contador++; 
  ?>
  <td width="100%" align="center" valign="middle">  ////td padre
    <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="7">
    <tr>
      <td align="center" valign="middle" class="categoria_imagen">////td hijo<a href="index.php?p=10&cod=<?php echo $row['id']; ?>"><img src="include/verThumbnail.php?cod=<?php echo $row['id']; ?>" border="0"></a></td>
    </tr>
    </table>
  </td>
  <?php
    if($contador==3){
      echo "</tr>";
      echo "<tr>";
      $contador = 0;
    }
  }
  ?>                                                                           
</tr>
</table>

3. Antes de ir al problema (mejor si se pudiese la visualizaras en: www-punto-jewelsoftheamazon-punto-com)
3.1. en la ruta /bracelets/:
esta sin la clase .tablita y si visualizas las 3 primera imagenes de cada fila no se ajustan a todo el ancho del td padre
3.2. en la ruta /earrings/:
esta con la clase .tablita (ver codigo de arriba) y ahora si las imagenes se ajustan a todo el ancho del td padre.........
.....pero existe un problema (ojo k esto visualizo en mi monitor) es k las imagenes no se ajustan al td hijo.

parace k se me complico todo esto... no entiendo, y gracias de nuevo por la ayuda que me puedas brindar

hoberwilly · #25 (**permalink**) 29/05/2009, 10:39

Hola a todos, sobre el último post...si tuviesen algunas sugerencias xq lo he realizado pero creo estar equivocado xq lo solucione aumentando el cellpadding="17" (Es correcto este camino??? xq no es solucionar x solucionar ademas existe mucho espacio entre las filas de las imagenes)

Código php:

Ver original<table border="0" width="100%" height="100%" [COLOR="Red"]cellpadding="17"[/COLOR] cellspacing="0" align="center" class="tablita">     
<tr>
  <?php
  while($row=mysql_fetch_array($_pagi_result)){
    $contador++; 
  ?> y lo demas

Saludos,