if width > height ???

[IceGloo]

Hallo liebes Forum,

ich habe einen Container mit einem background-image
und möchte nun per javascript die Größe dessen ändern, jenachdem ob der Container breiter oder höher ist (er ist dynamisch).

mein aktueller Stand ist der hier:



if ($('#top').height() > $('#top').width()) {
$('#top').css( "background-size", "auto 100%" );
}


if ($('#top').width() < $('#top').height()) {
$('#top').css( "background-size", "100% auto" );
}



allerdings (wie man es sich wohl denken kann) funktioniert dies nicht..
könnt Ihr mir weiterhelfen?

Liebe Grüße!

 

[Tronjer]

Was genau funktioniert nicht, die CSS-Zuweisung?

 

[IceGloo]

Ich bin mir nicht ganz sicher,

$('#top').css( "background-size", "100% auto" ); müsste eigentlich richtig sein, oder gibt es da etwas zubeachten, da die 100% und das auto ja "eigentlich" 2 dinge nur zusammengenommen sind, breite und höhe, da es aber auch in css keine möglichkeit gibt die breite und höhe mit 2 unterschiedlichen css befehlen anzusprechen, kann ich mir das einfach nicht erklären.

da die implementierung der externen js-datei funktioniert, muss es an " if ($('#top').height() > $('#top').width()) {} " liegen, ist mir dort eventuell ein fehler unterlaufen?




ich bekomme auch keine fehlermeldung oder sonst was, es funktioniert nur einfach nicht.

 

[Tronjer]

Hmm, nein, wir reden noch aneinander vorbei. Du hast zwei if-Abfragen, die quasi identisch sind und beide dasselbe bewirken sollen:

- if height > width
- if width < height

Das macht schon mal wenig Sinn.

Anstatt direkt innerhalb der Funktion eine CSS-Zuweisung vorzunehmen, könntest du auch eine Klasse anhängen.

$('#top').addClass('myclass');

Und dann bliebe zu klären, ob background-size: auto 100% auch wirklich das ist, was du willst, oder nicht lieber background-size: cover.

 

[IceGloo]

Die Abfragen machen keineswegs das selbe;

ist der div breiter, soll das bild links und rechts festhängen
ist der div höher, oben und unten

somit würde der div immer ausgefüllt bleiben, auch wenn er sehr schmal oder sehr hoch gehen würde.

ob ich das element direkt oder per classe anspreche sollte doch egal sein oder?

background-size:cover; ist eine css3 spekifikation und ist noch nicht überall implementiert.