Positionierung eines div-Elements in einem anderen div-Element

fratso · 17. Februar 2019

Moin!

Hört sich eigentlich gar nicht so schwer an, ist es aber - zumindest für mich.

Ich würde gern eine Graphik mit - sagen wir - 100 x 100 px unten mittig auf einer Seite plazieren; das bekomme ich hin. Darin soll, ZENTRIERT, eine größere Graphik mit 400 x 400 px stecken. Und diese beiden sollen sich bei Veränderung der Bildschirmgröße verkleinern und vergrößern.

Beispiel:

Code

img
    {
        max-width: 100%;
        height: auto;
    }

.dimensions
    {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

.centered
    {
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

...

<div class="dimensions">
    <img src="./images/umfang.svg" style="z-index: 4;">
    <div class="centered">
        <img src="./images/rad.svg" style="z-index: 2;">
    <div>
</div>

Alles anzeigen

Die Position beider divs ist zwar korrekt, aber ein resize ergibt keinen Unterschied; zusätzlich ist nur ein Teil des Rades zu sehen.

Alle meine bisherigen Versuche haben kein zufriedenstellends Ergebnis geliefert.

Weiß jemand Rat?

Dank & Gruß

Frank

DER · 17. Februar 2019

Ich kann deinen Gedankengang leider schlecht ohne Die Grafiken nachvollziehen: Bisher klappt bei mir alles: https://jsfiddle.net/v7219a8k/

Mein erster Rat ist es allerdings das "z-index" aus dem HTML zu nehmen und es wie üblich in den CSS Code zu integrieren. Das HTML Attribut "style" wird Heutzutage nicht mehr statisch verwendet und sollte in keinem HTML Dokument aufzufinden sein.

Sempervivum · 17. Februar 2019

Versuche dieses:

CSS:

Code

        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        #centerimg {
            height: 30%;
            width: auto;
            margin: auto;
        }

        #bottomimg {
            height: 15%;
            width: auto;
            margin: 0 auto;
        }

Alles anzeigen

HTML:

Code

<body>
    <img id="centerimg" src="images/dia0.jpg">
    <img id="bottomimg" src="images/dia1.jpg">
</body>

So passen sich die Bilder in der Größe an, wenn man die Höhe des Browserfensters ändert. Auf Anhieb wüsste ich keine Lösung mit CSS, wo die Bilder sowohl auf Breiten- als auch auf Höhenänderung reagieren und gleichzeitig das Seitenverhältnis beibehalten.

Außerdem ist noch offen, ob das mittlere Bild im verbleibenden vertikalen freien Raum zentriert werden soll - das tut das CSS oben, oder ohne Berücksichtigung des unteren Bildes - dann müsste man es leicht ändern.

Sempervivum · 17. Februar 2019

PS: Mir fällt gerade ein, dass sich, wenn ich mich richtig erinnere, SVG-Grafiken bei der Skalierung anders verhalten als Bitmaps. Am besten postest Du mal diese Grafiken als Anhang.

fratso · 17. Februar 2019

Zitat von DER

Ich kann deinen Gedankengang leider schlecht ohne Die Grafiken nachvollziehen: Bisher klappt bei mir alles: https://jsfiddle.net/v7219a8k/

Mein erster Rat ist es allerdings das "z-index" aus dem HTML zu nehmen und es wie üblich in den CSS Code zu integrieren. Das HTML Attribut "style" wird Heutzutage nicht mehr statisch verwendet und sollte in keinem HTML Dokument aufzufinden sein.

Dank für Deine Antwort. Du findest mein Fragment unter http://e-chauffiert.de/div_in_div.html - das Code wird vor der endgültigen Fertigstellung ohnehin noch bereinigt; und dann verschwindet der "style" auch. Das größere Bild würde ich gern an genau dieser Position darstellen, ohne, daß der obere Teil verschwindet. Entferne ich overflow: hidden, sehe ich ihn zwar, erhalte aber die ungewollten Scrollbalken.

fratso · 18. Februar 2019

Zitat von Sempervivum

PS: Mir fällt gerade ein, dass sich, wenn ich mich richtig erinnere, SVG-Grafiken bei der Skalierung anders verhalten als Bitmaps. Am besten postest Du mal diese Grafiken als Anhang.

Hi Sempervivum, Dank auch Dir. Die Graphiken sind stellvertretend die beiden ungefüllten Kreise auf http://e-chauffiert.de/div_in_div.html - sie 'skalieren schön mit', allerdings ist da noch das Problem mit dem oberen Teil des größeren Kreises ... Auf "flex" wollte ich zugunsten der Browserkompatibilität verzichten.

Sempervivum · 18. Februar 2019

Verstehe, dann lag ich ja mit meinem Ansatz ganz daneben. Jetzt verstehe ich es besser. Meinst Du, dass der obere Teil abgeschnitten ist?

fratso · 18. Februar 2019

Zitat von Sempervivum

Verstehe, dann lag ich ja mit meinem Ansatz ganz daneben. Jetzt verstehe ich es besser. Meinst Du, dass der obere Teil abgeschnitten ist?

Ja, er ist abgeschnitten, weil das div halt nur die Höhe des kleineren Kreis hat. Die Herausforderung ist, die beiden Kreise wie gewünscht fix anzuordnen und sie zu skalieren, damit die Seite auch auf einem mobilen Endgerät vernünftig anzusehen ist.

Sempervivum · 18. Februar 2019

Ich schrieb ja oben:

Zitat

Auf Anhieb wüsste ich keine Lösung mit CSS, wo die Bilder sowohl auf Breiten- als auch auf Höhenänderung reagieren und gleichzeitig das Seitenverhältnis beibehalten.

Wäre es denn ausreichend, wenn sich die Größe nur in der horizontalen anpasst, so wie bei dem großen Kreis in deiner Datei?

fratso · 18. Februar 2019

Zitat von Sempervivum

Ich schrieb ja oben:

Wäre es denn ausreichend, wenn sich die Größe nur in der horizontalen anpasst, so wie bei dem großen Kreis in deiner Datei?

Hm, ich stelle gerade fest, daß gar nicht (korrekt) skaliert wird, sondern sich nur die Entfernungen untereinander ändern. Mist, ich muß es wohl nochmal von Beginn an überdenken ...

Sempervivum · 18. Februar 2019

Das Problem mit dem oben abgeschnittenen Kreis lässt sich leicht beheben, indem man overflow: hidden; nicht pauschal sondern nur für body setzt:

html-seminar.de/woltlab/attachment/1794/

fratso · 18. Februar 2019

Zitat von Sempervivum

Das Problem mit dem oben abgeschnittenen Kreis lässt sich leicht beheben, indem man overflow: hidden; nicht pauschal sondern nur für body setzt:

html-seminar.de/woltlab/attachment/1794/

Sehr schön, vielen Dank!

Sempervivum · 18. Februar 2019

Versuche dies:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        #wrapper {
            margin-top: auto;
            text-align: center;
            position: relative;
        }

        #outerimg {
            height: auto;
            width: 40%;
            max-width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #centerimg {
            height: auto;
            width: 10%;
            max-width: 100px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <img id="centerimg" src="images/klein.svg">
        <img id="outerimg" src="images/gross.svg">
    </div>
</body>

</html>

Alles anzeigen

In horizontaler Richtung ändern sich die Kreise mit der Breite des Browserfensters.

DER · 18. Februar 2019

fratso Ich sehe auf der Beispielseite jetzt keine Probleme mehr, ist das Problem nun gelöst?

Positionierung eines div-Elements in einem anderen div-Element

Jetzt mitmachen!

Teilen

Tags