modificar tamaño de imagen segun pantalla del cliente

Buen dia;
Tengo que modificar una imagen segun la resolucion de la pantalla del usuario, eh buscado en san google y el libro de javascript que tengo, pero cargan la imagen de la siguiente manera:

     <h:body >
        <img src="Dibujomp.PNG" name="imgfondo" id="imgfondo" ></img>
..............
..............
..............
</h:body>

ahora para optener la imagen para utilizarla en javascript para poder modoficar la imagen se usa lo siguiente:

<script language="javascript" type="text/javascript">
            var img = document.getElementById(imgfondo);
            document.images.imgfondo.width=200px;
        </script>

ahora tambien realize este codigo

logo = document.getElementById("imgfondo");
            logo.width = 100;
            logo.height = 200;

No se si estoy colocando mal el codigo o no se que sea, segun esto asi funciona, les dejo en que lo tratod e montar

JSP 2.0
Framework icefaces 2.0
Netbeans 6.9.1
tomcat 6.32

Espero y alguien me pueda ayudar a llevar esto a buen puerto.

Miguel V.
Gracias.

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.

Porcentajes

Puedes especificar el tamaño de la imagen en porcentajes, asi se ajustaran a la pantalla

Imagen de rodrigo salado anaya

Modificar el tamaño de una imagen con Jquery

Hola te dejo este pequeño ejemplo bueno dos, el primero modifica el tamaño de la imagen cuando el tamaño del navegador se modifica y el segundo cuando carga.
Estoy usando Jquery vale.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
      $(window).resize(function() {
        var imagenHTML  = "<img/>";
        $("#contenedor-div").html(imagenHTML);
        $("#contenedor-div img")
          .attr("id", "imagen")
          .attr("src", "http://www.javamexico.org/files/zen_logo.png")
          .attr("width", $(window).width())
          .attr("height", $(window).height());
      });
    </script>
  </head>
  <body>
    <div id="contenedor-div"/>
  </body>
</html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
      function alCargar() {
        var imagenHTML  = "<img/>";
        $("#contenedor-div").html(imagenHTML);
        $("#contenedor-div img")
          .attr("id", "imagen")
          .attr("src", "http://www.javamexico.org/files/zen_logo.png")
          .attr("width", $(window).width())
          .attr("height", $(window).height());
      }
    </script>
  </head>
  <body onload="alCargar()">
    <div id="contenedor-div"/>
  </body>
</html>

Lo que no se (aun) es como hacerle para que al cargar la imagen se pinte y cuando el tamaño de la pantalla se modifique la imagen lo haga también.

Nota: Hay un buen de cosas que no son necesarias pero las deje por practicar, como usar un div en ves de poner un tag de img directamente y los demás atributos...

Nos una retroalimentación cuando termines heeee por que luego se hacen patos. Mucha suerte :D.

Imagen de rodrigo salado anaya

Ammm

Por cierto lo que dice @cuauhpilli debería de bastar y modificando lo que hice quedaría algo así:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
      function alCargar() {
        var imagenHTML  = "<img/>";
        $("#contenedor-div").html(imagenHTML);
        $("#contenedor-div img")
          .attr("id", "imagen")
          .attr("src", "http://www.javamexico.org/files/zen_logo.png")
          .attr("width", "100%")
          .attr("height", "100%");
      }
    </script>
  </head>
  <body onload="alCargar()">
    <div id="contenedor-div"/>
  </body>
</html>

Jajajaja lo cajeta es que así se ajusta a la pagina sin pedo alguno... es más si quitas todo y solo dejas algo como http://www.w3schools.com/tags/att_img_width.asp jala de maravilla, solo quería practicar un poco :P bye

Imagen de rodrigo salado anaya

Error Fatal :S

Solo te comento que cambie .prepend() por .html(), no se en que estaba pensando. Lo cambie por que prepend inserta contenido al inicio de nodo del DOM en cuestion, entonces estaba agregando como loco un buen de imágenes.

Te dejo estos otros pequeños ejemplos de lo que buscas:

<html>
  <head>
    <script type="text/javascript">
      function alCargar(){
        document.getElementById("imagen").width = document.body.offsetWidth;
        document.getElementById("imagen").heigth = document.body.offsetHeight;
      }
    </script>
  </head>
  <body onload="alCargar()">
    <img id="imagen" src="http://www.javamexico.org/files/zen_logo.png" ></img>
  </body>
</html>

O

<html>
  <head>
    <script type="text/javascript">
      function alCargar(){
        var img = document.getElementById("imagen");
        imagen.width = window.innerWidth;
        imagen.heigth = window.innerHeight;
    }
    </script>
  </head>
  <body onload="alCargar()">
    <img id="imagen" src="http://www.javamexico.org/files/zen_logo.png" ></img>
  </body>
</html>

Referencia:
http://api.jquery.com/prepend/
http://api.jquery.com/html/
http://www.javascripter.net/faq/browserw.htm
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Imagen de cororo

gracias

hola;
Gracias por el codigo, lo quepasa esque al precionar el "logo." me deveria salir la opcion para saleccionar la propiedad "width" pero nome aparecia entonces detodas formas selo puse y ya funciona.

Casi no eh tenido chanse de practucar el codigo pero lo que veo que colcoaste diferente ami es el "window", gracias por los aportes espero poder practivcarlos el domingo y te comento que fue lo que paso, la verdad no quiero meter mucho lo que es jquery solo el javascript dado que icefaces trabaja muy bien del ladod el clientes pero sino funciona, pues integro jquery como lo manejas tu.

Esto lo requiero para que al crecer un icefaces panel colapsible varie al ta,año de la imagen dinamicamente segun los paneles colapsibles abiertos.

Muchas gracias de nuevo y comento resultados.

Imagen de rodrigo salado anaya

: )

: ) vale pues suerte con tu código mano.

Imagen de cororo

una manera muy de las cabernas de resolver el problema

hola;
ya logre que con cada click segun el offset de crecimiento se lo agrege a la imagen, con la siguiente instruccion:

var winW,winH,h=0;
winH = document.documentElement.offsetHeight;    obtengo el incremento del tamaño a agregarle a la imagen

ahora tengo que agregar este aumento a nuetsra imagen para que se adapte al crecimiento de la pagina:

var pop= document.getElementById("imgfondo");
pop.height=screen.availHeight+winH;

donde:

<ice:graphicImage url="Dibujomp.PNG" id="imgfondo" style="position: absolute;top:0px;left: 0px;" />

Ahora el codigo javascript utilizado fue:

function recargas(){                
                    var pop= document.getElementById("imgfondo");
                    if(document.getElementById("TVS")){                                      //div contenedor del panel
                       
                        if(pop.height>screen.availHeight){                                      //decrementamos el tamaño
                            alert("Hola");
                            winH = document.documentElement.offsetHeight;
                            alert("Tamaño disponible del screen");
                            pop.height=screen.availHeight;
                            h=1;
                        }
                        if(h==0){                                                                                      //Aqui incrementamos el tamaño de la imagen
                            winH = document.documentElement.offsetHeight;
                            pop.height=screen.availHeight+winH;
                           
                        }
                       
                       
                    }

Te agradesco mucho la ayuda ya que gracias a los ejemplos que agregaste pude armar esto que aunque no es muy proo, me funciona.

Imagen de cororo

hola de nuevo; Fijate que

hola de nuevo;
Fijate que al agregar los demas paneles se me revoruja mucho los tamaños como que los screen.availHeight no los toma bien el javascript y no toma valores "reales" del crecimiento del body segun el tamaño de la pagina, le buscare haber sis e puede con un javabean.