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

【问题标题】：Resize different-sized images based on browser window size根据浏览器窗口大小调整不同大小的图像
【发布时间】：2013-02-03 21:59:06
【问题描述】：

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

有什么想法吗？

提前致谢

【问题讨论】：

标签： jquery browser resize

【解决方案1】：

在你的 CSS 中

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

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

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

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

【讨论】：

【解决方案2】：

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

picture_new_height = (actual_picture_height) * (window_height / screen_height)

【讨论】：

只有一个问题，为什么我需要屏幕高度？
您需要一个固定值，以便您可以将其除以......它将为您提供窗口高度与屏幕高度的比率。例如，如果您的窗口高度是屏幕高度的一半，那么您的图像高度也需要是其原始高度的一半。这就是我们在上面的计算中所做的