Foros del Web » Creando para Internet » HTML »

Cual es la manera correcta de programar print de imagen?

Estas en el tema de Cual es la manera correcta de programar print de imagen? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/05/2009, 14:18
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Pregunta Cual es la manera correcta de programar print de imagen?

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
  1. <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
  2. <tr>
  3.   <td colspan="8" width="100%"><img src="img/LOGO.jpg" width="1000" height="118"></td>
  4. </tr>
  5. </tr>
  6. </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,
  #2 (permalink)  
Antiguo 25/05/2009, 14:53
 
Fecha de Ingreso: enero-2008
Ubicación: #Callao {Lima:Perú;}
Mensajes: 144
Antigüedad: 9 años, 10 meses
Puntos: 7
Respuesta: Cual es la manera correcta de programar print de imagen?

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
  #3 (permalink)  
Antiguo 25/05/2009, 17:02
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Cual es la manera correcta de programar print de imagen?

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
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 25/05/2009, 17:44
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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...
  #5 (permalink)  
Antiguo 25/05/2009, 17:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Cual es la manera correcta de programar print de imagen?

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
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 25/05/2009, 19:02
Avatar de jonak  
Fecha de Ingreso: mayo-2009
Mensajes: 34
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Cual es la manera correcta de programar print de imagen?

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

<img src="img/LOGO.jpg" style="width:4547px;height:580px">
  #7 (permalink)  
Antiguo 26/05/2009, 08:49
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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,
  #8 (permalink)  
Antiguo 26/05/2009, 08:53
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Cual es la manera correcta de programar print de imagen?

¿Te refieres a ajustar la imagen a la ventana? En ese caso debes usar porcentajes:
Código:
width: 100%;
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #9 (permalink)  
Antiguo 26/05/2009, 14:07
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Pregunta Respuesta: Cual es la manera correcta de programar print de imagen?

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
  #10 (permalink)  
Antiguo 26/05/2009, 14:12
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Cual es la manera correcta de programar print de imagen?

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #11 (permalink)  
Antiguo 26/05/2009, 14:23
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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,
  #12 (permalink)  
Antiguo 26/05/2009, 14:27
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Cual es la manera correcta de programar print de imagen?

No, no es que las imágenes se estiren a sus dimensiones "nativas", se estiran hasta ocupar todo el ancho/alto de su contenedor.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #13 (permalink)  
Antiguo 26/05/2009, 14:40
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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,
  #14 (permalink)  
Antiguo 26/05/2009, 14:48
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Cual es la manera correcta de programar print de imagen?

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
__________________
No diseñes usando tablas.
  #15 (permalink)  
Antiguo 26/05/2009, 14:59
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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,
  #16 (permalink)  
Antiguo 26/05/2009, 15:57
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Cual es la manera correcta de programar print de imagen?

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?
__________________
No diseñes usando tablas.
  #17 (permalink)  
Antiguo 26/05/2009, 16:07
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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
  #18 (permalink)  
Antiguo 26/05/2009, 19:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cual es la manera correcta de programar print de imagen?

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

¿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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 27/05/2009, 01:57
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: Cual es la manera correcta de programar print de imagen?

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
  #20 (permalink)  
Antiguo 27/05/2009, 09:58
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Pregunta Respuesta: Cual es la manera correcta de programar print de imagen?

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
  #21 (permalink)  
Antiguo 27/05/2009, 10:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cual es la manera correcta de programar print de imagen?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #22 (permalink)  
Antiguo 27/05/2009, 16:50
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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...
  #23 (permalink)  
Antiguo 27/05/2009, 17:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cual es la manera correcta de programar print de imagen?

Nah... las gracias ya sabes a quien corresponden en este caso. Al Capo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #24 (permalink)  
Antiguo 28/05/2009, 11:31
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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
  1. <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" align="center" class="tablita">    
  2. <tr>
  3.   <?php
  4.   while($row=mysql_fetch_array($_pagi_result)){
  5.     $contador++;
  6.   ?>
  7.   <td width="100%" align="center" valign="middle">  ////td padre
  8.     <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="7">
  9.     <tr>
  10.       <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>
  11.     </tr>
  12.     </table>
  13.   </td>
  14.   <?php
  15.     if($contador==3){
  16.       echo "</tr>";
  17.       echo "<tr>";
  18.       $contador = 0;
  19.     }
  20.   }
  21.   ?>                                                                          
  22. </tr>
  23. </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
  #25 (permalink)  
Antiguo 29/05/2009, 11:39
Avatar de hoberwilly  
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Cual es la manera correcta de programar print de imagen?

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
  1. <table border="0" width="100%" height="100%" [COLOR="Red"]cellpadding="17"[/COLOR] cellspacing="0" align="center" class="tablita">    
  2. <tr>
  3.   <?php
  4.   while($row=mysql_fetch_array($_pagi_result)){
  5.     $contador++;
  6.   ?> y lo demas
Saludos,
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 11:38.