Positionierung eines div-Elements in einem anderen div-Element

    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:



    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

    Versuche dieses:


    CSS:

    HTML:

    Code
    1. <body>
    2. <img id="centerimg" src="images/dia0.jpg">
    3. <img id="bottomimg" src="images/dia1.jpg">
    4. </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.

    DER schrieb:

    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.

    Sempervivum schrieb:

    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 schrieb:

    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.

    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?

    Sempervivum schrieb:

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

    Versuche dies:

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