1

我在我的网站上并排放置了三个不同大小的图像，并希望使用 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() 函数。

有任何想法吗？

提前致谢

4

2 回答 2

0

你可以得到屏幕的高度和宽度（解释在这里和这里）然后你可以使用一些简单的数学来重新调整你的图片大小。就像是

picture_new_height = (actual_picture_height) * (window_height / screen_height)
于 2013-02-03T11:40:30.897 回答
0

在你的 CSS

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

然后您还以 % 设置容器尺寸，因此实际上您不需要 javascript

NB1：完美渲染的“真实”调整大小应该发生在服务器端；但这会很慢

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

于 2013-02-03T11:31:30.667 回答