[gelöst] Skalierung bei background(css) und svg(html)

  • Moinsen,


    ich habe ein Hintergrundbild und SVG's (HTML). Wenn ich das Browserfenster jetzt kleiner mache, skalieren Bild und SVG's zusammen, solange bis das Bild die volle höhe anzeigt. Dann wird das Hintergrundbild links und rechts abgeschnitten. Genau ab diesen Punkt, liegt mein Problem. Die SVG's skalieren dann weiter und haben auf dem Bild nicht mehr die richtige Position.

    Ich möchte ungerne auf "background-size: cover;" verzichten.


    Wie kann ich das Problem lösen?
    Lösung kann auch ruhig mit Javascript sein.


    Code: https://jsfiddle.net/ht9dxc2m/1/


    Vielen Dank

  • Guten Abend Crazyman,

    Du brauchst auch nicht auf "background-size: cover;" zu verzichten, denn es gibt auch "object-fit: cover;" für Bilder, die keine Hintergrundbilder sind, siehe hier:

    img-Bilder mit CSS einpassen - object-fit: und object-position:
    direkt in HTML integrierte Bilder werden mit CSS in Bereiche eingepasst über object-fit: contain, object-fit:cover, object-fit:fill, object-fit:none,…
    www.html-seminar.de

    Wichtig dabei ist, dass man dem Bild die Größe geben muss, in die der Browser es einpassen soll, in diesem Fall 100% für Breite und Höhe, damit das Bild seinen Container ausfüllt. Nachdem ich das getan hatte, hat es immer noch nicht richtig funktioniert und ich musste bei Stackoverflow nachlesen:

    SVG image not aligning to equivalent of 'object-fit' in 100vh viewport
    I'm trying to get an SVG image to be the equivalent of object-fit inside an 100vh full screen container. From what I can gather I need to use the…
    stackoverflow.com

    preserveAspectRatio="xMidYMid slice" war die Lösung.

    Damit funktioniert es dann, die Bilder stehen wie fest genagelt übereinander, egal, wie man die Größe des Browserfensters zieht.

    Etwas unschön ist, dass ich das SVG durch Transformation an die richtige Position und die richtige Größe bringen musste. Besser wäre es, wenn Du die Formen so ändern könntest, dass das Bild von Anfang an die richtige Größe hat und die Formen darin die richtige Position.

    Hier das vollständige HTML und CSS, ich war so frei und habe einige überflüssige Container entfernt:

  • Hey Sempervivum, ich danke dir vielmals.
    Ich habe es tatsächlich auch mit "object-fit: cover;" versucht, auch mit JavaScript und so vielen anderen Sachen.
    Vielen Dank für deine Mühe und vor allem für die Lösung meines Problems.

  • Crazyman

    Hat den Titel des Themas von „Skalierung bei background(css) und svg(html)“ zu „[gelöst] Skalierung bei background(css) und svg(html)“ geändert.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!