如何根据高度调整图像大小，如谷歌加号并使其具有响应性答案

【问题标题】：How to resize image like in google plus based on height and making it responsive如何根据高度调整图像大小，如谷歌加号并使其具有响应性
【发布时间】：2013-04-30 05:43:39
【问题描述】：

我想让一个图像在所有平台和所有分辨率的 Web 上都可缩放。谷歌的做法给我留下了深刻的印象。例如：

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

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

Google Script Image Resizing,

Resize image like google,

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

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

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

http://adaptive-images.com/ - 无法根据高度调整图像大小。它在宽度方面可以很好地缩放。
http://boxresizer.com/
Timthumb : http://www.binarymoon.co.uk/projects/timthumb/ , http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/ - 这不能很好地随高度缩放。
服务器端图像缩放器：http://css-tricks.com/snippets/php/server-side-image-resizer/
基于 Css 的大小调整：http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css

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

【问题讨论】：

我认为扩展 .jpg 直接调用服务器端脚本（例如 PHP）而不是图像。脚本生成请求大小的图片。 htaccess 示例：RewriteEngine onRewriteRule image.jpg image.php [R=301]

标签： php javascript responsive-design image-resizing php-gd

【解决方案1】：

Ethan Marcott 的解决方案就在这里。

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

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

【讨论】：