0

Currently I am working off of this code to resize an image with javascript

function resize(which) {
    var elem = document.getElementById(which);
    if (elem == undefined || elem == null) return false;
        if (max == undefined) {
            if (elem.width > document.documentElement.clientWidth) {

            } else if (elem.height > document.documentElement.clientHeight) {

            } else if (elem.height > document.documentElement.clientHeight && elem.height > document.documentElement.clientWidth) {

            }
        }
        if (elem.width > elem.height) {
            if (elem.width > max) 
                elem.width = max;
        } else {
            if (elem.height > max) 
                elem.height = max;
        }
}

I was wondering if I am heading in the right direction to resize an Image with javascript if the image is bigger then the clients viewport. I'd like some help with this also as I don't know what to do next to finish the code. Thanks. :)

Josh Ferrara
  • 757
  • 2
  • 9
  • 25
  • If you could indent that code it would make it much easier to read. – James Montagne Aug 22 '11 at 23:14
  • Can you not use jQuery or some other library? jQuery provides fantastic functions for detecting where an element is: http://api.jquery.com/position/ - and has plugins that could also help: http://www.appelsiini.net/projects/viewport. Other libraries will have similar functions (though probably not as many as jQuery). – Robin Winslow Aug 22 '11 at 23:34
  • @Robin Winslow, I can use jQuery if needed. – Josh Ferrara Aug 22 '11 at 23:52

1 Answers1

3

A similar question has been asked before:
Image resize to fit screen

Also, this jQuery plugin seems to do exactly what you need:
http://code.google.com/p/jquery-imagefit-plugin/

if you perform it on a 100% height, 100% width element:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Here's an example of this solution:
http://jsfiddle.net/nottrobin/zndkg/

Community
  • 1
  • 1
Robin Winslow
  • 10,908
  • 8
  • 62
  • 91