3

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:

1900 - https://lh3.googleusercontent.com/-9xyCVGjVJjE/AAAAAAAAAAI/AAAAAAAAAG0/a4jFEtQ3ziY/s1900-c-k-no/photo.jpg

190 - https://lh3.googleusercontent.com/-9xyCVGjVJjE/AAAAAAAAAAI/AAAAAAAAAG0/a4jFEtQ3ziY/s190-c-k-no/photo.jpg

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

Google Script Image Resizing,

Resize image like google,

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:

  1. http://adaptive-images.com/ - Unable to resize the image based on height. It scales well with respect to width.

  2. http://boxresizer.com/

  3. 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.

  4. Server side image resizer: http://css-tricks.com/snippets/php/server-side-image-resizer/

  5. 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.

Community
  • 1
  • 1
Srikanth V M
  • 672
  • 5
  • 14
  • 31
  • I think the extension `.jpg` calls a server-side script (e.g. PHP) instead of the image directly. The Script generates a picture in the requested size. htaccess example: `RewriteEngine on` `RewriteRule image.jpg image.php [R=301]` – alexP May 06 '13 at 13:13

1 Answers1

-1

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.

ayniam
  • 573
  • 2
  • 8
  • 27