Beiträge von fratso

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!

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

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.

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.

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.

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:

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>

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