Question

我有一个问题。

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

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

谢谢

Answer 1

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

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

Answer 2

您可以使用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 个答案:

检查http://jsfiddle.net/zrPpa/2/