First off, Webflow is an amazing tool with an equally amazing community of support. Thank you!!! Keep it up as you have won us over for sure. That said, we are still learning and help is needed from time to time.
The example below shows 2 images. The top utilizes a WebGL hover effect and the bottom is just a plane image with the exact styling. The top will NOT respond to its parent div to cover and keep the dimensions without getting distorted. Is there a way to get this to adhere to the styling rules like it’s very obedient neighbor below?
I don’t know exactly what the fix for this would look like, but there are a few issues here.
object-fit: cover needs to be applied to the element you are trying to fit into something, not the container. It therefore should go on the canvas.
2.object-fit only works on certain elements. To my knowledge it does not work on a div.
With whatever code you are using, JS is being used to resize the canvas to fit its parent element. the object-fit property never has a chance to work because the canvas is being stretched to fit the container.
I’ve noticed that if you statically set the height and width of the .js-image class, then set object-fit:cover on the canvas.
Edit: I’m fairly sure the only solution here to to get the canvas to stop resizing.
ahhh interesting post there Stan, thank you! looks very similar, will play around to see if there is something there. my js is not tight at all so I’ll see what I can do.
hey Steven, that does make sense thank you! sounds like this route is a bit easier to tackle without getting to deep into js. will play around and hope for the best.