✔ Div an Bild ausrichten

[boecoa13]

Hallo,

habe folgendes Problem:
ich habe ein Div erstellt in dem in der Mitte ein Bild von einem Handy ist und nun brauche ich über dem Handy noch ein Div.
Soweit so gut. Allerdings muss das Div welches über dem Handy ist, genau an den Displaybereich des Handys angepasst werden, da dort später dann noch diverser Inhalt folgen wird. Zum besseren Verständnis ist noch ein Bild angefügt wie es schlussendlich ausschauen soll (abgesehen von den Farben )
Das Div über dem Bildschirm soll sich je nach Veränderung des Browserfensters und somit auch je nach Veränderung der Größe des Handys ebenso wieder anpassen und gleich positioniert sein wie bei meinem Beispiel.

<div class="div_display">
<img class="display" src="../files/grundbild.png" alt="Bild nicht gefunden"/>
<div class="contentDisplay"></div>   
</div>

.div_display{
    width: 100%;
    height: 100%;
    position: absolute;
}

.contentDisplay {
    background-color: grey;
    width: 42.6%;
    height: 71%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 10;
    margin-top: 58px;
}

.display{
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
}

 

[Sempervivum]

nun brauche ich über dem Handy noch ein Div.

Wie ist das zu verstehen? Soll dieses div das Bild überdecken, so dass es aussieht, als ob sein Inhalt auf dem Bildschirm des Handys angezeigt wird?
https://jsfiddle.net/Sempervivum/5thkwjd6/3/

 

[FormFollowsFunction]

Pack doch contentDisplay in div_display und richte die Abstände mit Margin aus.

 

[boecoa13]

Wie ist das zu verstehen? Soll dieses div das Bild überdecken, so dass es aussieht, als ob sein Inhalt auf dem Bildschirm des Handys angezeigt wird?
https://jsfiddle.net/Sempervivum/5thkwjd6/3/

Ja genau so, nur, dass der Inhalt auch beim Verändern der Größe des Browserfensters immer noch so ausgerichtet und nicht alles irgendwo verschoben sein soll

Pack doch contentDisplay in div_display und richte die Abstände mit Margin aus.

dann habe ich leider noch immer das gleiche Problem wie bei Sempervivum


hoffe ihr versteht was ich meine

 

[Sempervivum]

nur, dass der Inhalt auch beim Verändern der Größe des Browserfensters immer noch so ausgerichtet und nicht alles irgendwo verschoben sein soll

Wenn ich dich richtig verstehe, soll auch der Text im Div seine Größe ändern, so dass das Erscheinungsbild immer gleich ist, d. h. die Zeilenumbrüche sollen immer an der gleichen Stelle sein? Berücksichtige, dass sich dann die Lesbarkeit bei kleinem Bildschirm verschlechtert.

 

[boecoa13]

Ja genau das meine ich

 

[Sempervivum]

Dafür kenne ich leider keine Lösung mit reinem CSS, nur dieses:
https://jsfiddle.net/Sempervivum/5thkwjd6/9/

 

[FormFollowsFunction]

Das sieht doch gut aus !
Ab 30% und weniger, bekomme ich allerdings den Scrollbalken zu sehen.

 

[Sempervivum]

Das liegt daran, dass das Element beim Herunterskalieren weiter den vollständigen Platz einnimmt. Mit overflow:hidden kann man den Leerraum jedoch verbergen:
https://jsfiddle.net/Sempervivum/5thkwjd6/10/

 

[boecoa13]

Vielen vielen Dank, ist genau das was ich erreichen wollte