Estoy tratando de usar jquery para obtener el navegador de altura y anchura y de utilizar esa información para cambiar el tamaño de mi imagen para que se ajuste a las dimensiones. Quiero que las imágenes a pantalla completa en cada página si se ve en un ordenador portátil o un monitor de gran tamaño. Tengo todas mis imágenes en un ancho estándar de 1280 dpi ahora.

Para ver lo que tengo hasta ahora he publicado mi código para mi nyu cuenta: http://i5.nyu.edu/~ejs426/

Bueno, eso es útil…, han considerado que la publicación de su código de esto, donde nos son? Por cierto, ¿no les preocupa acerca de la relación de aspecto de las imágenes?

OriginalEl autor ElizabethS | 2011-12-05

3 Comentarios

  1. 6

    jQuery

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

    Cambiar tamaño de

    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%;}
    Muchas gracias! El único problema que estoy teniendo es en la img cambiar el tamaño desde mis imágenes son de una matriz. También quiero mantener una relación de aspecto. Sugerencias? Esta es la forma que tengo de mis imágenes: $(function(){ var imagenes = [‘editorial/image1.jpg’,’editorial/image2.jpg’,’editorial/image3.jpg’,’editorial/image4.jpg’,’editorial/image5.jpg’,’editorial/image6.jpg’,’editorial/image7.jpg’,’editorial/image8.jpg’];

    OriginalEl autor adeneo

  2. 1

    Esto puede ser realizada exclusivamente con CSS. Sugiero viendo este tutorial:

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

    El código de abajo represnts el super fácil CSS3 manera de hacer las cosas. El tutorial ofrece otras alternativas.

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

    OriginalEl autor James Hill

  3. 0

    Esto es lo que he usado en el pasado, ajuste de la anchura y la altura predeterminadas, a continuación, tratando de calcular por intentar recuperar las diversas dimensiones de la ventanilla.

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

    OriginalEl autor Scruffy The Janitor

Dejar respuesta

Please enter your comment!
Please enter your name here