Question

我在网站上并排放置了三张不同大小的图片，并希望根据浏览器大小调整大小，使用jQuery。

$(window).bind('load resize', function() {
    var windowheight = $(window).height();
    $('#pictures img').each(function() {
        $(this).height(windowheight);
    });
});

在CSS文件中我有：

#pictures img {
    width:auto;
    max-height:100%;
}

如果每个图像具有相同的高度，此代码将是正确的，但我不知道传递给height（）函数的值，考虑到所有三个图像具有不同的高度。

有什么想法吗？

提前致谢

Answer 1

在你的CSS中

img {max-width:100%;max-height:100%;}

然后你也将容器尺寸设置为％，所以实际上你不需要javascript那个

NB1：完美渲染的“真实”调整大小应该发生在服务器端;但那就是kinna在飞行中缓慢

NB2：现在有了用于客户端调整大小的现代浏览器解决方案（它比设置高度更复杂......）

Answer 2

你可以获得屏幕的高度和宽度（解释here和here），然后你可以使用一些简单的数学来重新调整你的图片大小。

之类的东西

picture_new_height = (actual_picture_height) * (window_height / screen_height)

根据浏览器窗口大小调整不同大小的图像大小

2 个答案: