Déterminer navigateur hauteur & largeur pour redimensionner l'image en plein écran

Je suis en train d'utiliser jquery pour obtenir le navigateur de la hauteur et de la largeur et de les utiliser pour redimensionner mon image pour l'adapter à celui dimensions. Je veux que les images en plein écran sur chaque page, si il est visualisé sur un ordinateur portable ou un grand écran. J'ai toutes mes images à une largeur standard de 1280 dpi maintenant.

Pour voir ce que j'ai jusqu'à présent j'ai posté mon code pour mon nyu compte: http://i5.nyu.edu/~ejs426/

Eh bien, c'est pratique...avez-vous pensé de l'affichage de votre code ici, où nous? D'ailleurs, n'êtes-vous pas préoccupé par les proportions de vos images?

OriginalL'auteur ElizabethS | 2011-12-05

  1. 6

    jQuery

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

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

    Sur redimensionner

    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%;}
    Merci beaucoup! Le seul problème que j'ai est sur le img redimensionner depuis mes images sont dans un tableau. Je tiens également à maintenir un ratio d'aspect. Des Suggestions? C'est de cette façon que j'ai mes images: $(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'];

    OriginalL'auteur adeneo

  2. 1

    Cela peut être fait uniquement avec du CSS. Je suggère de vérifier ce tutoriel:

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

    Le code ci-dessous represnts la super facile CSS3 façon de faire les choses. Le tutoriel propose d'autres alternatives.

    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;
}

    OriginalL'auteur James Hill

  3. 0

    C'est ce que j'ai utilisé dans le passé, le réglage par défaut de la hauteur et de la largeur puis en essayant de le calculer en essayant de récupérer les différentes dimensions de la fenêtre d'affichage.

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

    OriginalL'auteur Scruffy The Janitor