Cool Javascript Function

I want to place a jpg image in an html page and I want the whole image to be visible. So.. if I press F11 and then zoom in on the page, javascript must monitor the image to see whether any part of the image is not being shown; the javascript must then resize the image so that the whole image is shown. Btw, I have attached an extra doc with images to help explain the requirement. I don't care about aspect ratio. If I zoom out again, the javascript must automatically start returning the image to its original size. So the image must be as big as possible but the whole image must be visible (no part of the image must be out of view). I was thinking one way to create this functionality is to place a little label at each corner of the image and then if the label is out of view, you know the image needs to be resized... Note: the javascript function must work in all the major browsers and you must only use html and javascript (no plug-ins or other coding languages)