Frage Div über Bild Positionierung

[meisterleise]

Hallo Kollegen,
ich habe ein Bild (siehe Anhang) welches immer den gesamten Bildschirm ausfüllen soll (covered) oder von mir aus auch immer nur 100vh (je nachdem was besser funktionieren würde). Auf dem Screen des Smartphones möchte ich ein DIV setzen und darüber einen skrollbaren Screen simulieren.

Habe das Bild schon extra so bearbeitet, dass der Screen absolut mittig ist und das Bild 16:10 ist, gesetzt als bg image, covered. Das DIV habe ich mittig platziert und mit vw & vh angepasst. Funktioniert nun, aber nur auf einem 16:10 Monitor und Browser im Vollbildmodus. Das würde für die einmalige Präsentation zwar notfalls reichen, aber wenn ich es noch hinkriegen würde, dass es auch auf anderen Monitoren funktioniert, wäre ich glücklicher.

Hat jemand etwas vergleichbares schon einmal gemacht und einen Tipp dazu?
Lässt sich das mit einem schlichten CSS-Trick umsetzen?
Wenn zu kompliziert, lasse ich es erstmal so.

 

[meisterleise]

Meine Überarbeitung:
Habe nun das bg image auf contain gesetzt und das screen div auf aspect-ratio: 9/16.
Das funktioniert, so lange das Browserfenster mind. 16:10 oder breiter ist.
Das ist nun eine deutliche Verbesserung.

Falls jemand noch eine bessere Idee hat, gerne melden!

 

[montababa]

Falls jemand noch eine bessere Idee hat, gerne melden!

Also ich kann dir einen Hinweis geben, womit du das machen kannst.

Ich habe es selbst noch nicht ganz drauf aber sowas stellst du mit Media Queries ein.
Damit kannst du Breakpoints setzen, ab welcher Bildschirmgröße es wie formatiert ist.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hier auf w3school kannst du es super ausprobieren.

 

[meisterleise]

Danke für deinen Kommentar, @montababa

Kenne mich aus mit media queries. Ich halte das in dem Fall aber nicht für so praktikabel, weil media queries immer in Stufen funktionieren. Obwohl, man könnte damit auch das Seitenverhältnis abfragen. Das wäre vielleicht noch ein Ansatz... Das Problem bleibt, dass die Darstellung des bg img schwer vorherzusagen ist.

Müsste ich mal überlegen, ob man daraus was machen kann:

@media screen and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 16/10)

 

[Sempervivum]

Wenn deine Seite auf beliebigen Browserfenstern dargestellt werden soll, musst Du, egal wie Du es anstellst, immer eine Kröte schlucken:

• Bei "cover" wird entweder seitlich oder oben und unten etwas ab geschnitten.
• Bei "contain" bleibt entweder seitlich oder oben und unten leerer Raum.
• Soll das Bild das Browserfenster in beiden Richtungen vollständig ausfüllen, wird es verzerrt.

Hinzu kommt noch, dass dein Bild im Querformat ist, das ist weniger geeignet für eine Darstellung auf dem Handy, was meistens im Hochformat gehalten wird.

 

[meisterleise]

@Sempervivum Danke für deinen Kommentar. Aber das ist alles klar und nicht die Frage. Es geht nicht darum, wann wie viel von dem bg img abgeschnitten wird oder auch nicht, sondern wie es zu bewerkstelligen sein könnte, dass ein darüberliegendes Div immer genau auf dem Screen des Handys positioniert ist.

Und natürlich ist diese Darstellung PC only. Eine Handysimulation auf einem Handy macht keinen Sinn. Ergo: auf dem Smartphone wird das Foto des Smartphones nicht dargestellt, sondern der Inhalt des Div direkt ausgegeben.

 

[Sempervivum]

Jetzt habe ich ein wenig weiter darüber nach gedacht und mir scheint, es ist mir jetzt klar, was Du meinst: Du möchtest über das Bild ein Div legen und dieses soll hinsichtlich Größe und Position genau das Handy abdecken, das auf dem Bild dargestellt ist. Richtig?

 

[meisterleise]

Genau!
Sorry, wenn das bisher nicht ausreichend verständlich war.

Wie gesagt, habe ich das zu einem großen Teil auch schon hinbekommen:

• Habe das bg img auf contain gesetzt
• das bg img hat ein Format von 16:10
• das darüberliegende Div hat die Formatierung:

divScreen {
    height: 72vh;
    width: auto;
    max-height: 72vh;
    overflow-y: scroll;
    aspect-ratio: 1 / 1.78;
}

Damit funktioniert die Darstellung, solange das Browserfenster 16:10 oder breiter ist.
Nur wenn es schmaler als 16:10 wird, gibt es Probleme.

Im Prinzip kann ich damit also leben.
Wenn allerdings jemand weiß, wie man so etwas besser umsetzen kann, höre ich mir das gerne an.

 

[Sempervivum]

Immerhin positiv, dass wir uns jetzt so weit verstehen.
Solch ein Problem kommt mir nicht zum ersten Mal unter. Der Kern ist, dass man dieses div eigentlich relativ zur realen Größe des Bildes positionieren müsste. Aber wenn man einen Prozentwert verwendet, bezieht sich dieser immer auf die Größe des umgebenden Containers und man hat keine Info darüber ob das Seitenverhältnis des Browserfensters größer oder kleiner ist als das des Bildes. Eine Lösung mit CSS kenne ich nicht aber mit Javascript kann man das problemlos berechnen und das CSS definieren abhängig vom Seitenverhältnis des Bildes relativ zu dem des Browserfensters.
Falls jemand doch eine Lösung mit CSS kennt, immer her damit.

 

[Sempervivum]

PS: Wahrscheinlich doch mit CSS lösbar, denn in einer Mediaquery kann man sich auf das Seitenverhältnis beziehen und abhängig davon das CSS umdefinieren.

 

[meisterleise]

Absolut! Das ist doch die Lösung!

@montababa Deine Grundidee in Post #3 war also doch der richtige Ansatz sowie meine Schlussfolgerung in #4. Ich hatte es nur nicht zu Ende gedacht, aber das war jetzt noch der fehlende Anstoß von @Sempervivum

Meine Lösung:

@media screen and (min-aspect-ratio: 16 / 10) {
divScreen {
    height: 72vh;
    width: auto;
    max-height: 72vh;
    overflow-y: scroll;
    aspect-ratio: 1 / 1.78;
}

divScreen::-webkit-scrollbar {
  width: 0;
}}

@media screen and (max-aspect-ratio: 16 / 10) {
divScreen {
    height: auto;
    width: 25.3vw;
    max-width: 25.3vw;
    overflow-y: scroll;
    aspect-ratio: 1 / 1.78;
}

 

[Sempervivum]

Super, die Möglichkeiten von CSS werden laufend erweitert, so dass Dinge, die früher nicht gingen, jetzt möglich sind.