javascriptimage

Change image size with JavaScript

I'm trying to change the size of an image with JavaScript. The jS file is separate from the HTML page.

I want to set the height and width of an image in the JS file. Any good ways on doing this?

Solution

  • Once you have a reference to your image, you can set its height and width like so:

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

    In the html, it would look like this:

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