Resize images to be fullscreen with javascript?

Question

Can you resize images to be fullscreen with javascript in the same way you can with flash?

Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design: http://buildinternet.com/project/supersized/

And this plugin seems to only with with background images: http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

Ideally id like to do this with jQuery. Thanks

Answer 1

Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.

http://jsbin.com/okizi5

Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.

Answer 2

Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.

Answer 3

How about this:

$(window).resize(function() {
    $('#myImgId').width($(window).width());
    $('#myImgId').height($(window).height());
});

It will not maintain the aspect ratio...