Определите высоту и ширину браузера, чтобы изменить размер изображения на весь экран - PullRequest
Новая
       18

Определите высоту и ширину браузера, чтобы изменить размер изображения на весь экран

4 голосов
/ 06 декабря 2011

Я пытаюсь использовать jquery для определения высоты и ширины браузера, а затем использовать эту информацию для изменения размера моего изображения в соответствии с этими размерами. Я хочу, чтобы изображения на каждом экране были полноэкранными, независимо от того, просматривается ли это на ноутбуке или большом мониторе. Все мои изображения теперь имеют стандартную ширину 1280 точек на дюйм.

Для просмотра того, что у меня есть, я разместил свой код в моей учетной записи nyu: http://i5.nyu.edu/~ejs426/

Ответы [ 3 ]

6 голосов
/ 06 декабря 2011

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%;}
1 голос
/ 06 декабря 2011

Это можно сделать исключительно с помощью 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;
}
0 голосов
/ 06 декабря 2011

Это то, что я использовал в прошлом, устанавливая высоту и ширину по умолчанию, а затем пытался вычислить их, пытаясь получить различные размеры области просмотра. 

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();
    }
...