For an easily reusable clip-path I recommend these steps:
- crop your path to its actual boundaries
- Scale the clip-path to fit a 1x1 bBox
- create a css image wrap class applying the clip-paths initial aspect ratio to the image
cropped clip-path example
.img-wrp {
width: 200px;
display:inline-block;
border: 1px solid #ccc;
}
.img-wrp-aspect {
position: relative;
overflow: hidden;
}
/** add aspect-ratio pseudo element: according to clip-path element **/
.img-wrp-aspect:before {
content: "";
display: block;
width: 100%;
padding-bottom: var(--aspectRatPad);
}
.img-clipped {
clip-path: url(#clipPath);
object-fit: cover;
object-position: 50%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.svgHidden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<div class="img-wrp img-wrp-aspect" style="--aspectRatPad:94.219%">
<img class="img-clipped" style="clip-path: url(#clipPath); object-position:50% 0%" src="https://media-cdn.t24.com.tr/media/library/2021/07/1627040373809-100496736-steve-jobs-march-2011-getty.jpg" alt="Photographer in a market." />
</div>
<div class="img-wrp img-wrp-aspect" style="--aspectRatPad:94.219%">
<img class="img-clipped" style="clip-path: url(#clipPath); object-position:20% 0%" src="https://media-cdn.t24.com.tr/media/library/2021/07/1627040373809-100496736-steve-jobs-march-2011-getty.jpg" alt="Photographer in a market." />
</div>
<!-- hidden clip-path svg -->
<!-- 1. cropped and scaled down to 1x1 units -->
<svg viewBox="0 0 1 1" class="svgHidden" aria-hidden="true">
<clipPath id="clipPath" clipPathUnits="objectBoundingBox">
<path d="M0 0.101l0.657-0.099c0.12-0.018 0.232 0.071 0.25 0.199l0.093 0.697l-0.657 0.099c-0.12 0.018-0.232-0.071-0.25-0.199l-0.093-0.697z" />
</clipPath>
</svg>
<p>You can shift the image position by changing the <strong>object-position</strong> attribute</p>
To fit the image to the clipped frames' dimensions you can use object-fit:auto (actually like your original css:
.img-clipped {
clip-path: url(#clipPath);
object-fit: cover;
object-position: 50%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The images layout width is controlled by the wrapping <div>
How to get a cropped clip-path?
- Open and crop it in a vector drawing app like AI, Inkscape, Figma etc. (Honestly, I think this option is often overlooked)
- Write a js helper like this: Codepen (just paste your path and check the 'clipPath' option.
- Use Yoksel's excellent clip-path helper By default, it won't crop anything, but there is also a "Remove offset" option
css path() approach
(Theoretically) you can also define a clip-path directly in css like so (MDN example):
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
Unfortunately, css (pseudo svg) capabilities aren't yet on par with svg based clip paths – this will most likely change in future browser versions introducing more elaborate concepts for path scaling/fitting.
However,
@ccprog's pathfit library might be interesting to fix the aforementioned css path() shortcomings.
Further reading: About clip-path caveats and pitfalls
Eric Meyer: Scaling SVG Clipping Paths for CSS Use
Css-tricks: Unfortunately, clip-path: path() is Still a No-Go
Css-tricks: Clipping and Masking in CSS
