Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resiz images according to screen resolution

Status
Not open for further replies.

112345543211

IS-IT--Management
Jul 6, 2011
1
0
0
AZ
Hi All!
I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page.

Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code.

Thanks in advance
 
Resize them for what?

If you are displaying them full screen why do you need to find the dimensions? Why not simply set them to be 100% of their container's width and height. Assuming that to be the <body> element a regular image tag will stretch to fit the browser window.

If the images are smaller than the screen size, or the the browser window in set to some extreme dimensions like 1200px by 40px the results would be a completely undefinable garble of pixels. Additionally the up scaling of images smaller than the browser window will cause pixelation, and unexpected artifacts.

I would suggest you rethink the need to have an image fill the browser window.

But if its absolutely necessary, you could attempt to use window.innerWidth, and window.innerHeight.









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top