Изменение размера изображения с помощью JavaScript

Ответ 1

Как только у вас есть ссылка на изображение, вы можете установить его высоту и ширину следующим образом:

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

В html это будет выглядеть так:

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

Ответ 2

Вы можете изменить фактические атрибуты ширины и высоты следующим образом:

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

Ответ 3

Если вы хотите изменить размер изображения после его загрузки, вы можете подключиться к событию onload тега <img>. Обратите внимание, что он может не поддерживаться во всех браузерах (Ссылка Microsoft утверждает, что он является частью спецификации HTML 4.0, но Спецификация HTML 4.0 не отображает событие onload для <img>).

Код ниже проверен и работает в: IE 6, 7 и 8, Firefox 2, 3 и 3.5, Opera 9 и 10, Safari 3 и 4 и 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>

Ответ 4

Изменение изображения очень просто, но как вы его измените до первоначального размера после его изменения? Вы можете попробовать это, чтобы изменить все изображения в документе на исходный размер:

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)
}

Ответ 5

вы можете увидеть результат здесь В этом простом блоке кода вы можете изменить размер своего изображения и сделать его больше, когда мышь вводится над изображением, и он вернется к исходному размеру, когда уйдет мув.

HTML:

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

Файл js:

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

Ответ 6

//  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());