3

我想让一个图像在所有平台和所有分辨率的网络上可扩展。谷歌的做法给我留下了深刻的印象。例如:

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

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

网络上有很多资源展示了如何根据屏幕大小调整图像大小,但没有一个能接近 google plus。我有一些相同问题的链接

谷歌脚本图像大小调整

像谷歌一样调整图像大小

http://www.quora.com/Google+/How-google-resize-images-dynamically-based-on-screen-size

但以上都没有解决我的问题。我可以调整图像的大小,但不能像 google plus 那样使其响应。

我有 jquery、javascript、php 方面的知识。我相信这与 php gd 库和 jquery 或可能通过 css 媒体查询有关,但无法解决问题。在这里提出问题之前,我已经尝试了以下资源:

  1. http://adaptive-images.com/ - 无法根据高度调整图像大小。它在宽度方面可以很好地缩放。

  2. http://boxresizer.com/

  3. Timthumb:http : //www.binarymoon.co.uk/projects/timthumb/,http ://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/ - 这不能很好地扩展与高度。

  4. 服务器端图像调整器:http: //css-tricks.com/snippets/php/server-side-image-resizer/

  5. 基于 CSS 的大小调整:http ://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css

有人可以建议我解决问题或帮助我根据上述资源对问题进行分类。

4

1 回答 1

0

Ethan Marcott 的解决方案在这里。

http://unstoppablerobotninja.com/entry/fluid-images/

他是第一个使用“响应式网页设计”一词的人。希望它能解决你的问题。无论如何,这是一个很好的问题。

于 2013-06-04T09:44:59.350 回答