像谷歌一样调整图像大小

Question

我有一个问题。

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

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

谢谢

Answer 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/

Answer 2

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

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