像谷歌一样调整图像大小答案

【问题标题】：Resize image like google像谷歌一样调整图像大小
【发布时间】：2011-03-16 17:30:06
【问题描述】：

我有一个问题。

当窗口的高度调整大小时，如何按比例调整图像大小？

例如 Google 图片：（警告：模糊的 NSFW） http://www.gnomecorp.fr/local/cache-vignettes/L160xH230/google-girljaf72-40c90.jpg

谢谢

【问题讨论】：

也许可以使用对工作更安全的图像？
该图像不会为我调整大小，除了浏览器的本机调整大小（您无需执行任何操作即可触发。）
那和google无关；这是显示图像文件（而不是 html 文件）时的浏览器功能。

标签： jquery css resize

【解决方案1】：

可以使用jQuery实现跨浏览器。在提供的示例中，当您水平调整窗口大小时，图像将按比例调整大小。

var imgorgw = $('img').width(),
    winorgw = $(window).width();

$(window).resize(function() {
    var winnew = $(window).width();
    winnew <= imgorgw ? $('img').width(winnew) : $('img').width(imgorgw);
})

在http://jsfiddle.net/zrPpa/2/查看工作示例

【讨论】：

嘿，你的功能很好，但如果我按高度和宽度调整大小，它就不起作用。我该怎么做？

【解决方案2】：

您的示例中的效果由您的网络浏览器自动执行。

您可以通过在 CSS 中将 img 元素的宽度和高度声明为百分比来复制此效果。确保您没有在 img 标签中明确指定 with 和 height 属性。

【讨论】：