Search code examples
image-scaling

Increase/decrease image size, website


i have a webpage with table and in it images, i would like to add the option to increase/decrease image size, how could i do that? Something like ctr+plus and ctr+ minus does.

This is what it is for now, http://www.ursic-ei.si/1.html

Thank you all for answers.


Solution

  • You can't increase image size - you display fixed size images.

    Things you could do:

    1. Have different sized copies of the same image and serve them selectively from the server when buttons pressed.
    2. Serve a single larger image that will be auto scaled to fit dimensions of element. Then alter the size of that element in JavaScript button event handlers.

      document.getElementById("myImgElement").width = 300;

      document.getElementById("myImgElement").height= 300;

    You need to have an image larger than what you are down scaling to. The browser will scale it automatically to fit in the smaller image element. Note that you will need an image sufficiently big to fit your maximum size. Then downscale using code above.