Label-Höhe dessen Hintergrund-Bild anpassen.

messmar

Erfahrenes Mitglied
Hallo Zusammen,

ich habe eine Gruppe von Labels, wo ich dynamisch Bilder als Hintergund einbette.

Da die Bilder unterschiedliche Höhe haben und ich im Vorfeld nicht weiß, wie hoch die sind, muss ich ja die Höhe der Labels automatisch wetergeben und zwar aus der Höhe der Bildes.

Folgendes:
Javascript:
el.css({'height' : el.background-size()})
hat mir nicht weitergebracht.
Und das Auslesen so einer Eigenschaft:
Javascript:
.background-size()
, gibt's gar nicht.

Irgendeine Idee bitte? Google hat bis jetzt noch nichts vernünftiges rausgebracht ;-)

Danke
Messmar
 
Zuletzt bearbeitet:
Danke scohn mal!

ehrlich gesagt, ich habe es schon gelesen, aber ich bin an das hier:
Javascript:
url.height()
gescheitert.

Aber ich mache mich schlau.. wenn ich schonmal die image-source komme, dann muss ich die Höhe auslesen können.

Danke
Messmae
 
Auch das wird nicht funktionieren, denn die Funktion height() kannst Du nur auf ein jQuery-Element anwenden, nicht auf eine URL. Mir fällt nur der Weg ein, ein temporäres img-Tag im DOM einzufügen und dem src-Attribut die URL zu geben. Dann solltest Du die Höhe auslesen können.
 
Schau mal, so funktioniert's:
Code:
    <body style="background-image: url(img/m_003.jpg);">
        <script>
            var imgurl = $("body").css("background-image").replace("url(\"", "").replace("\")", "");
            var tmpimg = $("<img style=\"display:none\">");
            $("body").append(tmpimg);
            tmpimg.on("load", function () {
                console.log("src=" + $(this).attr("src") + " width=" + tmpimg.width() + " height:" + tmpimg.height());
                tmpimg.remove();
            });
            tmpimg.attr("src", imgurl);
           
        </script>
    </body>
Unmöglich, dass das so kompliziert ist. Ich würde versuchen, lieber ein normales img-Tag statt eines Hintergrundes zu verwenden, dann wäre es einfacher.
 
Liefert bei mir (FF latest)
Höhe: 0
Breite: 0
Aber die Idee, einfach ein Image-Objekt zu nehmen, macht die Sache natürlich einfacher.
 
Ja weil der FF das Bild aus Sicherheitsgründen nicht läd. JSBin wird mit SSL ausgeliefert und das Bild nicht.
Warum schaut eigentlich niemand in die Konsole wenn was nicht funktioniert?
Kopier dir das Script lokal und versuchs mit einem deiner Hintergundbilder.

Grüße
 
Hallo Leute!

vielen Dank für den Support und die Tipps! Es funkt. mit den, beiden oben geposteten, Vorschlägen.

Ich habe auch im Netz ne Lösung gefunden und ich habe die folgenderemassen meinem Code angepasst und es funkt.

Javascript:
url = $label.css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  $("<img/>").attr("src", url).load(function(){
  $label.css({'height': this.height});
});

DANKE!
Messmar
 
Hast Du das auch im Chrome getestet? Ich hatte mal das Problem, dass dieser computed Styles nicht richtig ermittelt, wenn das Element nicht im DOM verankert ist.
 
Zurück