Ist es möglich, einen reaktionsschnellen CSS-Clip-Pfad zu erstellen? ⇐ HTML

[Anonymous]

Ich habe ein Bild und muss es mit einem SVG -Pfad klappen. Es funktioniert in Ordnung mit definierten Bildgrößen wie 688px x 800px, aber mein Problem ist, dass ich idealerweise so reagieren würde. Ich habe bereits versucht, es mithilfe von PreserveSpectratio zum Laufen zu bringen, aber noch kein Glück (Sie finden diesen Code am Ende der Frage). Ich habe so etwas noch nicht viel gemacht, daher würde jede Hilfe sehr geschätzt werden. Ich kann auch nicht sehen, wie diese Idee reagiert werden kann - https://jsfiddle.net/g80unhyq/
Dies ist die Abmessungen, die ich oben


< /code>
CSS: < /p>

Code: Select all

.image-container {
position: relative;
width: 688px;
height: 800px;
}

.masked-image {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: path('{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}');
}
< /code>
Wie oben erwähnt, habe ich auch versucht, dies auf etwas andere Weise zu bearbeiten: < /p>
HTML: < /p>

[img]https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx[/img]




d="{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}"/>




< /code>
CSS: < /p>
.image-container img {
clip-path: url(#svg-mask);
}

Aber immer noch kein Glück