确定浏览器的高度和宽度，以将图像调整为全屏大小

Question

我想使用jquery获取浏览器的高度和宽度，然后使用该信息调整我的图像大小以适应那个尺寸。我希望每个页面上的图像都是全屏显示，无论是在笔记本电脑还是大型监视器上查看。现在，我已将所有图像的标准宽度设置为1280dpi。

要查看我目前的进展，我已将我的代码发布到我的nyu账户：http://i5.nyu.edu/~ejs426/

- ElizabethS

---

那很方便...你考虑过在这里发布你的代码吗？顺便问一下，你不担心你的图片的宽高比吗？ - David Thomas

Answer 1

jQuery

var W = $(window).width(),
    H = $(window).height();

$('img').height(H).width(W);

当页面尺寸调整时

function imgsize() {
    var W = $(window).width(),
        H = $(window).height();

    $('img').height(H).width(W);
}
$(window).bind('resize', function() { imgsize(); });

CSS

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

- adeneo

---

非常感谢！我遇到的唯一问题是在img调整大小方面，因为我的图像在数组中。我还希望它们保持纵横比。有什么建议吗？这是我拥有的图像方式：$（function（）{ var images = ['editorial/image1.jpg','editorial/image2.jpg','editorial/image3.jpg','editorial/image4.jpg','editorial/image5.jpg','editorial/image6.jpg','editorial/image7.jpg','editorial/image8.jpg']; - ElizabethS

Answer 2

这可以纯粹使用CSS完成。我建议查看这个教程：

http://css-tricks.com/3458-perfect-full-page-background-image/

下面的代码代表了超级简单的 CSS3 方式来处理事情。该教程还提供了其他替代方案。

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

- James Hill

Answer 3

这是我过去使用的方法，设置默认高度和宽度，然后尝试通过获取各种视口尺寸来计算它。

var myWidth = 800;
var myHeight = 600;

    if ($.browser.msie) {
        if (typeof (window.innerWidth) == 'number') {

            myWidth = window.innerWidth;
            myHeight = window.innerHeight;

        }
        else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

            //IE 6+ in 'standards compliant mode' 

            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;

        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

            //IE 4 compatible 

            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;

        }
    }
    else {
        myWidth = $(window).width();
        myHeight = $(window).height();
    }

- Scruffy The Janitor