I want to make an image scalable on web across all platforms and for all resolutions. I am pretty impressed by the way google does it. For example:
There are lot of resources on web that shows how to resize images based on screen size, but none come close to google plus. I got some links for the same question
http://www.quora.com/Google+/How-google-resize-images-dynamically-based-on-screen-size
But none of the above solved my issue. I am able to re size an image but not able to make it responsive like in google plus.
I have knowledge on jquery, javascript, php. I beleive it is something to do with php gd library and jquery or maybe through css media queries, but not able to get through the problem. I have tried the following resources before putting up a question here:
http://adaptive-images.com/ - Unable to resize the image based on height. It scales well with respect to width.
Timthumb : http://www.binarymoon.co.uk/projects/timthumb/ , http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/ - This doesn't scale well with height.
Server side image resizer: http://css-tricks.com/snippets/php/server-side-image-resizer/
Css based resizing: http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css
Can some one please suggest me to solve the issue or help me sorting my issue based on above resources.
Ethan Marcott's solution is here.
http://unstoppablerobotninja.com/entry/fluid-images/
He is guy who first used the term "Responsive web design". Hope it solves your issue. Anyway a nice question for the age.
