Cambiar el tamaño de la imagen con JavaScript

Question

Estoy tratando de cambiar el tamaño de una imagen con JavaScript. El archivo jS es independiente de la página HTML.

Quiero establecer el alto y el ancho de una imagen en el archivo JS. ¿Alguna buena forma de hacer esto?

Answer 1

vez que haya una referencia a su imagen, puede ajustar su altura y anchura, así:

var yourImg = document.getElementById('yourImgId'); 
if(yourImg && yourImg.style) { 
    yourImg.style.height = '100px'; 
    yourImg.style.width = '200px'; 
} 

en el HTML, que se vería así:

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/> 

Answer 2

Usted puede cambiar los atributos reales de ancho/alto como este:

var theImg = document.getElementById('theImgId'); 
theImg.height = 150; 
theImg.width = 150; 

Answer 3

Si desea cambiar el tamaño de una imagen después de que está cargada, puede ach al evento onload de la etiqueta <img>. Tenga en cuenta que puede no ser compatible con todos los navegadores (Microsoft's reference afirma que es parte de la especificación de HTML 4.0, pero HTML 4.0 spec no muestra el evento onload para <img>).

El código siguiente se prueba y en trabajo: IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9 & 10, Safari 3 & 4 y Google Chrome:

<img src="yourImage.jpg" border="0" height="real_height" width="real_width" 
    onload="resizeImg(this, 200, 100);"> 

<script type="text/javascript"> 
function resizeImg(img, height, width) { 
    img.height = height; 
    img.width = width; 
} 
</script> 

Answer 4

Cambio de una imagen es fácil, pero ¿cómo lo cambias al tamaño original después de haberlo cambiado? Puede intentar esto para cambiar todas las imágenes en un documento nuevo a su tamaño original:

 
var i,L=document.images.length; 
for(i=0;i<L;++i){ 
document.images[i].style.height = 'auto'; //setting CSS value 
document.images[i].style.width = 'auto'; //setting CSS value 
// document.images[i].height = ''; (don't need this, would be setting img.attribute) 
// document.images[i].width = ''; (don't need this, would be setting img.attribute) 
} 

Answer 5

// This one has print statement so you can see the result at every stage if  you would like. They are not needed 

function crop(image, width, height) 
{ 
    image.width = width; 
    image.height = height; 
    //print ("in function", image, image.getWidth(), image.getHeight()); 
    return image; 
} 

var image = new SimpleImage("name of your image here"); 
//print ("original", image, image.getWidth(), image.getHeight()); 
//crop(image,200,300); 
print ("final", image, image.getWidth(), image.getHeight()); 

Answer 6

you can see the result here En estos simples bloque de código se puede cambiar el tamaño de la imagen, y hacerlo más grande cuando el el mouse ingresa sobre la imagen y volverá a su tamaño original cuando me vaya.

html:

<div> 
<img onmouseover="fifo()" onmouseleave="fifo()" src="your_image" 
     width="10%" id="f" > 
</div> 

js archivo:

var b=0; 
function fifo() { 
     if(b==0){ 
      document.getElementById("f").width = "300"; 
      b=1; 
      } 
     else 
      { 
     document.getElementById("f").width = "100"; 
      b=0; 
     } 
    }