I have an image, and I need to clip it using an SVG path. It works okay with defined image sizes like 688px x 800px, but my problem is that I would ideally like this to be responsive. I've already tried to get it to work using preserveAspectRatio but no luck yet (you can find this code at the bottom of the question). I've not done this sort of thing much before so any help would be greatly appreciated.
Just to clarify, when I say responsive I would like it to be a bit more fluid with the screen size, rather than cutting of straight edges etc.
Edit: I've tried to place the image inside an SVG element but it just doesn't work right at all, I can't see how to make this idea responsive either - https://jsfiddle.net/g80unhyq/
This is at the dimensions I've listed above
And this is how it looks as responsiveness kicks in
I have an example of what I've done so far on Tailwind's playground - https://play.tailwindcss.com/fRq1Cv6OqP?file=css
HTML:
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1367&q=80" alt="Your Image" class="masked-image" />
</div>
CSS:
.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. }}');
}
As mentioned above, I also tried to get this to work in a slightly different way:
HTML:
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx" />
<svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="svg-mask">
<path
d="{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}"/>
</clipPath>
</defs>
</svg>
</div>
CSS:
.image-container img {
clip-path: url(#svg-mask);
}
But still no luck
