Auflösungsunabhängig platzieren

olaf2500 · 24. April 2018

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:

HTML

<!DOCTYPE html>
<html lang="de">
    <head></head>
     <body>
        <div id="bild">
            <input type="text" id="textfeld"></input>
        </div>
        <script>
        var windowWidth = window.screen.width;          
        var windowHeight = window.screen.height;        
        var windowHeightProp = windowHeight/1080;       
        var windowWidthProp = windowWidth/1920;            

        document.getElementById("bild").style.width = 1000 * windowHeightProp +"px";
        document.getElementById("bild").style.height = 500 * windowHeightProp +"px";
        document.getElementById("bild").style.top = 100 * windowHeightProp +"px";
        document.getElementById("bild").style.left = 100 * windowWidthProp +"px";

        document.getElementById("textfeld").style.top = 200 * windowHeightProp +"px";
        document.getElementById("textfeld").style.left = 500 * windowWidthProp +"px";
        </script>
      <style>
        #bild {
            background-image: url("download.jpg");
            position:relative;
        }
        #textfeld {
            position:relative;
            -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
            -ms-transform: rotate(-90deg);     /* IE 9 */
        }
      </style>
  </body>
</html>

Alles anzeigen

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

Sailor · 24. April 2018

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.

Sempervivum · 24. April 2018

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?

olaf2500 · 24. April 2018

Zitat von Sailor
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.

Zitat von Sempervivum

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

Sempervivum · 24. April 2018

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.

olaf2500 · 24. April 2018

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).

Sempervivum · 24. April 2018

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

HTML

<!DOCTYPE html>
<html lang="de">

<head></head>

<body>
    <div id="bildwrapper">
        <img src="images/dia0.jpg">
        <input type="text" id="textfeld">
    </div>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #bildwrapper {
            width: 100vw;
            height: auto;
            position: relative;
        }
        #bildwrapper img {
            width: 100%;
            height: auto;
        }
        #textfeld {
            position: absolute;
            left: 60%;
            top: 20%;
            transform: translate(-50%);
        }
    </style>
</body>

</html>

Alles anzeigen

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

olaf2500 · 24. April 2018

Genau das wollte ich. Perfekt, vielen Dank.

Sailor · 24. April 2018

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:

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
        <meta charset="UTF-8">
      <style>
        #bild {
            background-image: url("download.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            position:relative;
            width: calc(100vw / 1920 * 1000);
            height: calc(100vw / 1920 * 500);
            top: calc(100vw / 1920 * 100);
            left: calc(100vw / 1920 * 100);
        }
        #textfeld {
            position:relative;
            -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
            -ms-transform: rotate(-90deg);     /* IE 9 */
            top: calc(100vw / 1920 * 200);
            left: calc(100vw / 1920 * 500);
        }
      </style>
  </head>
  <body>
        <div id="bild">
            <input type="text" id="textfeld"></input>
        </div>

  </body>
</html>

Alles anzeigen

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

olaf2500 · 24. April 2018

Funktioniert auch super, einziger Nachteil an dieser Lösung: beim Zoomen verschiebt es sich, ansonsten aber auch genau so wie ich es wollte.

Auch dir vielen Dank

Sailor · 24. April 2018

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.

Auflösungsunabhängig platzieren

Jetzt mitmachen!

Teilen