Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize images to be fullscreen with javascript?

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

like image 888
Evanss Avatar asked May 31 '26 12:05

Evanss


1 Answers

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.

like image 90
amustill Avatar answered Jun 03 '26 00:06

amustill