Immer die Höhe des hintergrund-Bild in der Größe verändert, mit "background-size: enthalten"

So, ich habe eine image gallery. Jedes Bild ist ein background-image erstreckt sich über die gesamte Seite.

Um sicherzustellen, dass jedes Bild nutzt die maximal zur Verfügung stehende Breite, ich geben Sie die folgenden hintergrund-Größe:

background-size: 100% auto;

Jedoch, einige der Bilder sind größer als der verfügbare Bildschirm-Höhe.

Stellen Sie sicher, dass das Bild sichtbar ist, in voller Höhe (mindestens mit scroll bars), die ich brauchen würde, geben die body element die Höhe des in der Größe geänderten Hintergrundbild.

Aber es scheint kein Weg zu sein, um halt zu bekommen in der Größe veränderte Bild im hintergrund ist die Höhe, die in JavaScript.

Ist das wahr? Muss ich greifen, um die normale Bild-Elemente?

Gibt es viele Wege, um die Größe einer statische hintergrund-Bild, wie Wie bekomme ich hintergrund Bild size in jQuery? Sie aber offensichtlich nicht gelten hier.

InformationsquelleAutor Pekka 웃 | 2014-01-15

  1. 14

    Der Schlüssel ist die Verwendung des statischen Bilds, berechnen Sie das Seitenverhältnis des Bildes, und verwenden Sie dann das eigentliche element der Abmessungen, um herauszufinden, die berechneten Abmessungen der verkleinerte Bild.

    Zum Beispiel, nehmen wir an, Sie hätten die folgenden:

    html, body { height:100%; }
body {
    background-image: url('http://placehold.it/50x100');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

    Statischen Bild die Abmessungen sind 50x100 ein, und es ist so bemessen, nehmen Sie sich eine Breite 100% des body-Elements. Daher die body element ist die Breite wäre gleich in der Größe veränderte Bild in der Breite. Wenn Sie wollten, um zu berechnen, in der Größe veränderte Höhe des Bildes, Sie würde halt das Seitenverhältnis des Bilds. In diesem Fall, das Bild ist verkleinert-Höhe wäre 800px, weil (400*100)/50 = 800

    BEISPIEL HIER

    var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();

    Reine JS-Ansatz: BEISPIEL HIER

    var img = new Image();
img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize(){
    var bgHeight = document.body.offsetWidth * img.height / img.width;
    document.body.style.height = bgHeight + 'px';
}
window.onresize = resize; resize();

    Die Reine JS-Methode wird der Schnellste zu sein, zeigt dieser jsPerf Beispiel.

    Yup, das funktionierte gut. Hier ist ein jFiddle (mit jQuery, um die körpereigenen Breite wegen Faulheit): jsfiddle.net/NpDbX
    Ohh, great minds think alike: wir wörtlich kam auf die Lösung in der gleichen minute 🙂 Deins ist schöner, aber, und hört resize(), cool. Danke.
    Dies funktioniert nicht bei Firefox Abhilfe ?
    Es funktioniert bei mir im FF/Chrome.
    Wirklich? auch versuchen, einen relativen Pfad bei background-image wie /Pfad/zum Bild anstelle von http:// ...

    InformationsquelleAutor Josh Crozier

  2. 1

    Dieser arbeitete für mich (innerhalb eines Reglers):

    <!-- CSS -->
    <style>
        div.img { 
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        div.img:nth-of-type(1) {background-image: url('img.jpg');}
        div.img:nth-of-type(2) {background-image: url('img.jpg'); 
        }
    </style>

    <!-- HTML -->
    <div class-"img"></div>
    <div class-"img"></div>

    InformationsquelleAutor seanwbarker

Schreibe einen Kommentar