Cambiar el tamaño de la imagen de forma dinámica

Lo bueno del DOM de una página es que puedes acceder a los diferentes elementos de la página de una forma normalizada y modificar sus propiedades. Esto nos permite hacer cosas como modificar el tamaño de una imagen de forma dinámica.

Para empezar hay que crear una imagen dentro de un documento HTML. Para ello utilizaremos la etiqueta img. Veamos como quedaría la línea de código:

<img id="miImagen" src="imagen.jpg" alt="Mi imagen">

Aunque lo realmente importante es el código JavaScript que modifique las propiedades de la imagen. Para ello crearemos una función JavaScript a la que llamaremos cambiaTamanio, la cual pondremos dentro de las etiquetas script dentro de la cabecera de la página. Veamos como quedaría esto en nuestra página HTML:

<script>
function cambiaTamanio() {
  // código de la función
}
</script>

Acceder al elemento de la imagen

Dentro de esta función, lo primero será acceder al objeto que tiene la imagen. Para ello necesitamos conocer su identificador, que será el nombre que hayamos puesto al atributo ID. Y utilizar el método getElementById, pasándole como parámetro dicho ID.

Una vez que tengamos el elemento de la página podremos acceder a las propiedades del mismo y modificarlas. En este caso nos interesan el alto (height) y ancho (width) de la imagen. A las cuales daremos un tamaño diferente al que tienen.

function cambiaTamanio() {
  var imagen = document.getElementById('miImagen');
  imagen.height = 300;
  imagen.width = 400;
}

Compatibilidad con diferentes navegadores

Uno de los inconvenientes es que ciertos navegadores no soportan el modificar los datos de una imagen obteniéndola mediante .getElementById().

En otros navegadores como el Internet Explorer tienen arrays que reflejan las imágenes del documento que se ha cargado. A este array se accede mediante document.images y en concreto a una imagen mediante la siguiente línea de código:

document.images[0]

Así que nuestra función JavaScript validará si tiene dicho array, sino lo tiene accederá directamente al elemento. Es por ello que nuestro código de función queda de la siguiente forma:

function cambiaTamanio() {
  if (document.images) {
    document.images[0].height = 300;
    document.images[0].width = 400;
  } else {
    var imagen = document.getElementById('miImagen');
    imagen.height = 300;
    imagen.width = 400;
  }
}

Ejecutar la función

Ahora solo falta lanzar esta función. Esto lo podemos hacer, por ejemplo, mediante un botón y su evento onClick. Veamos la línea de código:

<input type="button" value="Cambiar Tamaño" onClick="cambiaTamanio();">