Cambiar tamaño de la imagen

inakisantos · #1 (**permalink**) 29/03/2005, 04:45

Buenas, soy nuevo en este foro y queria hacer una pregunta:
Tengo en una ventana 4 imagenes y quiero que según valla cambiando yo el tamaño de la ventana las imagenes vallan cambiando de tamaño ajustandose al alto y ancho de la tabla. Me funcionaba poniendo el tamaño de la imagen en "%" pero no se porqué con el Visual Studio pues no lo acepta asi que quisiera hacerlo mediante una funcion resize pero no se como hacer para que detecte el cambio de tamaño y k cambie el tamaño de la imagen....
Thanks!

monoswim · #2 (**permalink**) 29/03/2005, 06:24

Priemro que anda BIENVENIDO AL FORO !!!!!!!

Ahora bien, el problema es que cuando modificas el tamaño de la imagen, esta se pixela y queda realmente fea !!!!

Pero si quieres de esta forma sacas el ancho y alto de la ventana...

window.screen.width
window.screen.height

con estos valores debes hacer el porcentaje y meterlo en la imagen...Para sacar el % lo multiplicas por 0.2 si quieres que sea del 20%...Se entiende ?

Espero que te sirva
Saludos

inakisantos · #3 (**permalink**) 29/03/2005, 09:01

Buenas !!!
No me he explicado bien, lo que yo decia es:
Imaginate la ventana del navegador maximizada, en ese estado se ven las 4 imagnes perfectamente,entonces quito el maximizado y pinchando en la esquina inferior derecha de la ventana voy aumentando y disminuyendo el tamaño de la misma, es ahí donde quiero que la imagen se amplie o se encoja sin pixelarse.
Esto lo he conseguido con poner el width de la imagen en % respecto del td en el que esta, pero mi problema es que necesito que se vea bien en 800x600 y en 1024x768,asi que lo que busco es como poner en una funcion ( por ejemplo resizepage() ) el tamaño de la imagen en % dependiendo de la configuracion de la pantalla ya que el codigo no me funciona:

function resizepage()
{
window.imagen1.width = "50%" ;
window.imagen2.width = "50%" ;
window.imagen3.width = "50%" ;
window.imagen4.width = "50%" ;
}

donde imagenX es el ID de la imagen.

Muchas gracias!!!!!

KarlanKas · #4 (**permalink**) 29/03/2005, 09:40

Pensando en tu problema he hecho este ejemplo de manejo de imágenes:

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <script> 
    var x=null; 
    var y=null; 
    var proporcion; 
    function redimension(){ 
    if(!x){ 
    x=document.images[0].width; 
    y=document.images[0].height; 
    proporcion=x/y; 
    } 
     
    x-=5*proporcion; 
    y-=5; 
    document.images[0].width=x; 
    document.images[0].height=y; 
    if(y>0){ 
    setTimeout('redimension()',100) 
    } 
    } 
    </script> 
</head> 
 
<body> 
<img src="http://www.karlankas.net/chufa2.jpg" onload="redimension()"> 
 
 
</body> 
</html>

Para hacer lo que quieres, tal vez te sirva:

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <script> 
    var x=null; 
    var y=null; 
    var proporcion; 
    function redimension(){ 
    y=(screen.availHeight/2)-20; 
    x=(screen.availWidth/2)-20; 
    for(a=0;a<document.images.length;a++){ 
    document.images[a].width=x; 
    document.images[a].height=x; 
    } 
    } 
    </script> 
</head> 
 
<body onResize="redimension()" onLoad="redimension()"> 
<img src="http://www.karlankas.net/chufa2.jpg"><img src="http://www.karlankas.net/chufa2.jpg"><br> 
<img src="http://www.karlankas.net/chufa2.jpg"><img src="http://www.karlankas.net/chufa2.jpg"> 
 
 
</body> 
</html>

JavierB · #5 (**permalink**) 29/03/2005, 09:43

Hola inakisantos

Prueba poniendo la imágen así:

<img src="imagen1.jpg" style="width:50%" />

Con esto debería redimensionarse la imágen cada vez que cambie el tamaño de la ventana, pero como dice monoswim (terminado en "m"

) si se agranda mucho se afeará bastante.

Saludos,

KarlanKas · #6 (**permalink**) 29/03/2005, 10:23

Eso sí que es simplificar código, eh javier?!

Muy bueno... si yo cuando me quiero complicar la vidaaaa...

inakisantos · #7 (**permalink**) 29/03/2005, 10:24

Buenas!!!
KarlanKas lo siento pero no me funciona el 2º código aunque el 1º queda mu chulo el efecto.

JavierB, si que se redimensiona cuando cambia el tamaño de la pagina pero el problema viene en lo siguiente: Si a la imagen le doy el valor de 50% en 1024 me sale perfect pero al cambiar a 800,con ese valor la imagen se se estropea

Seguiré intentandolo...

Thanks!

JavierB · #8 (**permalink**) 29/03/2005, 10:41

Karlankas: no me había dado cuenta del choque. De tanto golpearme me parece que ya tengo el coco insensibilizado.

inakisantos: ¿Que quieres decir con "se estropea"?

Saludos,

KarlanKas · #9 (**permalink**) 29/03/2005, 10:52

prueba ahora:

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <script> 
    var x=null; 
    var y=null; 
    var proporcion; 
    function redimension(){ 
    y=(screen.availHeight/2)-30; 
    x=(screen.availWidth/2)-30; 
 
    for(a=0;a<document.images.length;a++){ 
    document.images[a].width=x; 
    document.images[a].height=y; 
    } 
    } 
    </script> 
</head> 
 
<body onResize="redimension()" onLoad="redimension()"> 
<table width="100%" style="position:absolute;top:0px;left:0px;"><tr><td> 
<img src="http://www.karlankas.net/chufa2.jpg"></td><td><img src="http://www.karlankas.net/chufa2.jpg"><br></td></tr> 
<tr><td><img src="http://www.karlankas.net/chufa2.jpg"></td><td><img src="http://www.karlankas.net/chufa2.jpg"></td></tr> 
 
</table> 
</body> 
</html>

inakisantos · #10 (**permalink**) 30/03/2005, 00:25

Que se estropea quiere decir que se distorsiona, Mirar lo que yo quiero es esto:

<html>
<head>
<title></title>

</head>
<body>

<table width="100%" border=0 align=center ID="Table9" style="position:absolute;top;200" name="Table9" >
<tr>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" width="48%" style="cursor:hand" onclick="//">
</td>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" width="48%" style="cursor:hand" onClick="//"> </td>
</tr>
<tr>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" width="48%" style="cursor:hand" onclick="//">
</td>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" width="48%" style="cursor:hand" onclick="//">
</td>
</tr>
</table>

</body>
</html>

Veis como segun vas cambiando el tamaño se encoge o se agranda???
Pues quiero eso para dos resoluciones por lo que no puedo poner width="48%" ya que en 800 no queda bien por lo que he pensado en hacerlo de esta manera=

<html>
<head>
<title></title>

<script>
function ResizePage()
{
if (document.body.offsetHeight < 500)//800x600
{

window.imagen1.width = "60%" ;
window.imagen2.width = "60%" ;
window.imagen3.width = "60%" ;
window.imagen4.width = "60%";

}
else//1024
{

window.imagen1.width = "48%" ;
window.imagen2.width = "48%" ;
window.imagen3.width = "48%" ;
window.imagen4.width = "48%";

}

}
</script>

</head>
<body onresize="ResizePage();">

<table style="position:absolute;top;200" ID="Table1" align=center width="100%" border=0 >
<tr>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" ID="imagen1" name="imagen1" style="cursor:hand" onclick="//">
</td>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" ID="imagen2" name="imagen2" style="cursor:hand" onclick="//">
</td>
</tr>
<tr>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" ID="imagen3" name="imagen3" style="cursor:hand" onclick="//">
</td>
<td class="clsLiteralData" align=center>
<img src="http://betihoritaldea.webcindario.com/images/fina.jpg" ID="imagen4" name="imagen4" style="cursor:hand" onclick="//">
</td>
</tr>
</table>

</body>
</html>

Pero no funciona porque no acepta " window.imagen4.width = "48%"; "
Sabeis como lo puedo poner?

JavierB · #11 (**permalink**) 30/03/2005, 03:57

Rehola.

Prueba cambiando: window.imagen4.width = "48%";

por: document.getElementById('imagen4').style.width="48 %";

Saludos,

inakisantos · #12 (**permalink**) 30/03/2005, 04:05

Muchas gracias !!! ya esta

JavierB · #13 (**permalink**) 30/03/2005, 06:45

Ssstupendo. Hasta pronto