Community forum for knowledge and support

Updated 10 months ago

Preserving aspect ratio and centering a clip-path within a wrapper

At a glance

The community member is having trouble with their clip-path not keeping the aspect ratio and staying inside the wrapper. They want the mask to be centered and preserve the ratio. Another community member responds that they fixed the issue by putting the masked image inside a container that keeps the right ratio, but the downside is that the center is now zoomed out. There is no explicitly marked answer.

Useful resources

jjohan Van Wambeke

I cant get my clip-path to keep aspect and stay inside wrapper.
Hi, I have been fighting with his SVG if anyone understands what is going on here?

I want the mask to be centered, preserved ratio. If anyone knows how this all affects eachother 🙏
It’s the hero of this page. with the partial blur-image.
https://spine-and-joint-centre.webflow.io/praktische-informatie

2 comments

MMatt Johnson

would you mind sharing a read-only link?

jjohan Van Wambeke

Hey Matt, I fixed it by putting the masked image inside a container that keeps the right ratio. The only downside is now the center is zoomed out. But I can live with that. The read-only-link would no longer reflect the issue.
Thanks for getting back to me tho 🙏 have a nice day ☀

Add a reply