像谷歌一样调整图像大小

我有个问题。

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

像谷歌图片的例子:( 警告：模糊的NSFW） http://sofzh.miximages.com/jquery/google-girljaf72-40c90.jpg

谢谢

Answer 1

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

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

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

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