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

Crazyman · 3. August 2023

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

Sempervivum · 3. August 2023

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Image SVG Cover</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #my-svg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: top;
            /* Ein wenig unschön: Wir bringen durch Transformation
            das Bild an die richtige Stelle und in die richtige Größe */
            transform: scale(0.5) translate(0, -45px);
            transform-origin: center center;
            vertical-align: top;
        }

        .mainnav {
            height: 100%;
            margin: 0;
            padding: 0;
            background-image: url(https://fakeimg.pl/1920x1440/?text=World&font=lobster);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .clickable-area {
            background-color: rgba(255, 0, 0, 0.5);
            /* Hier kannst du die gewünschte Hintergrundfarbe einstellen (hier: halbtransparentes Rot) */
            cursor: crosshair;
        }
    </style>
</head>

<body>
    <main class="mainnav">
        <svg id="my-svg" viewBox="0 0 1920 1440" preserveAspectRatio="xMidYMid slice">
            <path fill="#ff0000" stroke="#000000" d="M780,513L860,479L832,336L573,397L683,453L751,460Z"
                fill-opacity=".6" stroke-width="1" stroke-opacity=".8"
                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 0.6; stroke-opacity: 0.8;">
            </path>
            <polyline fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="10"
                points="1038,871,1147,808,1238,834,1335,900,1187,985,1137,925" />
        </svg>
    </main>
</body>

</html>

Alles anzeigen

Crazyman · 4. August 2023

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.

nextuser · 4. August 2023

Zitat von Sempervivum

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

Nicht, dass ich ein Problem damit hätte, aber hast nicht gerade du immer wieder die letzten Tage über vollständige Code-Posts gemeckert...

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

Crazyman 4. August 2023

Jetzt mitmachen!

Teilen

Tags