【问题标题】:Determine browser height & width to resize image to full screen确定浏览器高度和宽度以将图像大小调整为全屏
【发布时间】:2012-01-13 12:55:09
【问题描述】:

我正在尝试使用 jquery 来获取浏览器的高度和宽度,而不是使用该信息来调整我的图像大小以适应该尺寸。我希望图像在每一页上都是全屏的,无论是在笔记本电脑还是大显示器上查看。我现在所有图像的标准宽度为 1280 dpi。

要查看我目前拥有的内容,我已将我的代码发布到我的纽约帐户:http://i5.nyu.edu/~ejs426/

【问题讨论】:

  • 嗯,这很方便...您是否考虑过在这里发布您的代码,我们在哪里?顺便说一句,您不关心图像的纵横比吗?

标签: jquery image fullscreen


【解决方案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%;}

【讨论】:

  • 非常感谢!我遇到的唯一问题是 img 调整大小,因为我的图像在数组中。我还希望它们保持纵横比。建议?这就是我的图像: $(function(){ var images = ['editorial/image1.jpg','editorial/image2.jpg','editorial/image3.jpg','editorial/image4.jpg', '社论/image5.jpg','社论/image6.jpg','社论/image7.jpg','社论/image8.jpg'];
【解决方案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;
}

【讨论】:

    【解决方案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();
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-19
      • 1970-01-01
      • 1970-01-01
      • 2011-07-10
      相关资源
      最近更新 更多