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