Можно ли сделать отзывчивый CSS-клип-пат? ⇐ CSS

[Anonymous]

У меня есть изображение, и мне нужно обрезать его, используя путь SVG. Это работает нормально с определенными размерами изображений, такими как 688px x 800px, но моя проблема в том, что я бы в идеале хотел бы быть отзывчивым. Я уже пытался заставить его работать, используя PreserveasPectratio , но пока нет (вы можете найти этот код в нижней части вопроса). Я не делал такого рода вещам много до этого, поэтому любая помощь была бы очень оценена. Все, я не могу видеть, как сделать эту идею отзывчивой - https://jsfiddle.net/g80unhyq/образной. /> И вот как это выглядит как отзывчивость в


< /code>
css: < /p>

Код: Выделить всё

.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>
Как уже упоминалось выше, я также пытался заставить это работать немного по -другому: < /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);
}

Но все еще не повезло


Подробнее здесь: https://stackoverflow.com/questions/769 ... -clip-path