Auflösungsunabhängig platzieren

  • Hallo zusammen,


    Ich wusste nicht, in welchem Bereich ich das am besten frage, da das vermutlich mit CSS und JavaScript machbar wäre, ich denke CSS ist vermutlich eleganter, damit kenne ich mich aber praktisch null aus.


    ich versuche gerade ein Textfeld auf einem Bild zu platzieren, und es soll immer an genau der gleichen Stelle im Bild platziert sein, egal welche Auflösung am Monitor eingestellt ist. Das ist mein Code:

    Wie man sieht lese ich mit JavaScript die Breite und Höhe des Bildschirms aus und setze ihn in ein Verhältnis zu einem von mir gewählten Standard (1920*1080). Dann wollte ich die Position des Bildes und des Textfeldes abhängig von diesem Verhältnis festlegen. Das funktioniert allerdings nicht, bei anderer Auflösung ist auch das Feld an einer anderen Stelle. Hat jemand eine Idee wo mein Fehler liegt, bzw wie man es anders machen könnte?


    Danke

  • Das ist schon mal nicht richtig, was du da an Code hast.

    Das <style></style> gehört in den <head></head> Bereich!

    Dann solltest du testen, ob es mit...

    Code
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    besser funktioniert.

  • Ich bin ganz optimistisch, dass man das auch mit CSS machen kann, aber mir ist nicht ganz klar, wie Du es haben willst:

    • Soll das Bild das Browserfenster ganz ausfüllen?
    • Das Seitenverhältnis des Bildes soll erhalten bleiben?
    • Was ist der Sinn beim Drehen des Eingabefeldes um 90 Grad?
    • Das Eingabefeld soll vertikal zentriert sein?
    • Das Eingabefeld soll horizontal nicht zentriert, sondern mehr zum rechten Rand hin platziert werden?
  • Das ist schon mal nicht richtig, was du da an Code hast.

    Das <style></style> gehört in den <head></head> Bereich!

    Dann solltest du testen, ob es mit...

    Code
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    besser funktioniert.

    Hat leider nichts am Problem geändert.


    Ich bin ganz optimistisch, dass man das auch mit CSS machen kann, aber mir ist nicht ganz klar, wie Du es haben willst:

    • Soll das Bild das Browserfenster ganz ausfüllen?
    • Das Seitenverhältnis des Bildes soll erhalten bleiben?
    • Was ist der Sinn beim Drehen des Eingabefeldes um 90 Grad?
    • Das Eingabefeld soll vertikal zentriert sein?
    • Das Eingabefeld soll horizontal nicht zentriert, sondern mehr zum rechten Rand hin platziert werden?

    Punkt 1: Die Größe des Bildes ist relativ egal, es soll sich jedoch an die Auflösung anpassen, heißt es soll nicht größer sein wenn die Auflösung geringer ist.

    Punkt 2: Ja das Seitenverhältnis soll erhalten bleiben

    Punkt 3: Hat keinen tieferen Sinn, hatte vergessen das wieder heraus zu nehmen, Problem besteht aber ob gedreht oder nicht

    Punkt 4&5: Nein es soll nicht zwingend zentriert sein, es soll sich an einer bestimmten Stelle befinden: 500 vom linken Rand und 200 von oben, dass das vertikal genau das Zentrum ist, ist Zufall


    Edit: ich bin dämlich, ich musste background-size einfügen.

    Ohne hat sich das Bild an die vorgegebene Größe nicht angepasst daher sah es so aus als ob das Textfeld die Position ändert.


    Trotzdem danke euch beiden

  • Zitat

    Punkt 1: Die Größe des Bildes ist relativ egal, es soll sich jedoch an die Auflösung anpassen, heißt es soll nicht größer sein wenn die Auflösung geringer ist.

    Das verstehe ich immer noch nicht. In welcher Form soll es sich an die Auflösung anpassen?

    Zitat

    Punkt 4&5: Nein es soll nicht zwingend zentriert sein, es soll sich an einer bestimmten Stelle befinden: 500 vom linken Rand und 200 von oben, dass das vertikal genau das Zentrum ist, ist Zufall

    Auch das verstehe ich noch nicht. Die 500 und 200 (ich nehme an, Du meinst px) sollen sich auf die Originalgröße des Bildes beziehen? Denn wenn das Ganze responsiv sein soll, kann man dies nicht absolut angeben.

  • Nehmen wir an die Auflösung ist bei 1920*1080, wenn ich dann die Höhe und Breite des Bildes angebe füllt das Bild einen größeren Bereich des Bildschirms aus, wenn man die Auflösung verringert, und das möchte ich verhindern.

    Bei der Standardauflösung soll sich dann das Textfeld 500 Pixel vom linken Rand befinden und 200 Pixel vom oberen, bei einer anderen Auflösung an der gleichen Stelle des Bildes, da dieses dann aber nicht mehr 500 Pixel hoch ist muss auch das Textfeld nach oben rutschen.


    Das alles hat von Anfang an auch funktioniert, ich habe nur nicht bemerkt, dass sich das Bild in der Größe nicht angepasst hat sondern nur sozusagen der Rahmen des Bildes (der div-Bereich).

  • Probier mal, ob dies deinen Absichten einiger Maßen nahe kommt:

    Ich bin dabei davon ausgegangen, dass das Eingabefeld nicht mit skaliert werden soll.

  • und hier gleich noch ein Vorschlag!

    Wenn es dir darauf ankommt, dass die Proportionen des Bildes (1000*500 bei einer Bildschirmbreite von 1920px) erhalten bleiben, dann kommt das wohl deinen Vorstellungen nahe:

    Das Format 'background-size: 100%;' bei #bild kannst/solltest du noch nach deinen Vorstellungen modifizieren, damit es für dich passt!

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

  • Jep... mit dem Code ist ja nicht nur die Größe proportional und abhängig von der Displaybreite, sondern auch die Positionierung passt sich proportional an.

    Dafür sollte dieses CSS (fast) vollständig responsive sein und alle Bildschirmgrößen abdecken.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!