JavaScript - Image select between different sizes

Asked By Fouad Romieh on 01-Aug-13 07:11 AM

I have a mobile website that detect the user's device screen width and height, and based on these dimensions I have to redirect the user to the best images folder that has the same or very close size to the user's device. There is no problem if I have images with the same exact size as the device, but the problem appears when I don't have similar size within my images, so I have to search for the most close size that fits with the user's device. How can I achieve this search and selection with jquery? Like if the user device screen size is 300 X 380 and as you can see I don't have it ready in below sizes, so I must forward it to 320X480.

Thank in advance.
Robbe Morris replied to Fouad Romieh on 01-Aug-13 12:51 PM
Are you setting the image tags height and width property in the html on top of routing them to the closest folder?

I would think that would at least get you a reasonably good looking image on screen for those instances when the exact size isn't available.

Since you are already detecting the height and width of the screen, I won't bother walking you through that.
Fouad Romieh replied to Robbe Morris on 01-Aug-13 02:28 PM
It's not about viewing it in the browser/interface, the user must download the proper image with the size that is compatible for his device.