When using clip-path: polygon() on an <img>, is there a way of having the parent element collapse to the edge of the clip, or make the image stretch out the other way towards its parent?
I know I can do it to some extent with negative margins, but that feels awfully kludgy, and I can’t help feeling there ought to be a better approach to it.
The snippet below is the one I’m using, and gets me the right section of the image, now I just need the edge of its parent to snuggle up to it.
I’m not entirely sure what you mean. It maybe needs a working example or sketch.
But going by my interpretation, you may be looking at it the wrong way around.
What you are doing is effectively cropping the image, then wanting that cropped version to fill a space.
So I’m thinking keep the clipping path close to the element’s edge and on a containing wrapper element, to fill the space you want.
This of course shows more of the image than you wanted to. To remedy that the image is scaled up with a transform which does not affect its size in the document flow, so the wrapper maintains the original image size.
