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

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

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

任何想法？

在此先感谢

来源

2013-02-03 user1991185

在你的CSS

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

那么您还可以设置你的容器维度％，因此实际上你并不需要为

NB1的javascript：“真正的“调整一个完美的渲染应该发生在服务器端;但是这会是kinna慢上飞

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

来源

2013-02-03 11:31:30 mikakun

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

picture_new_height = (actual_picture_height) * (window_height/screen_height)

来源

2013-02-03 11:40:30 Ankit

只有一个问题，为什么我需要屏幕高度呢？ – user1991185

您需要一个固定值，以便您可以将它分成..它会给你窗口高度与屏幕高度的比率。例如，如果你的窗口的高度是屏幕高度的一半，那么你的图像高度也需要是其原始高度的一半。这就是我们在上面的计算中所做的 – Ankit

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

回答

相关问题