Object-fit: cover?

[jayrsmith]

Hi @andrewstephens75 . Thanks for this component. I'm hoping to possibly use it in a small festival site that is using diffused dithered images in its marketing campaign.

Can the component be used for a full width and height image background layer that fills the viewport in an object-fit: cover manner?

I've tried a few things but not sure if it's worth pursuing further if the underlying component doesn't really support it.

Thanks!

[andrewstephens75]

Jay,Thank you for your interest in my component. I am at work at the moment but I think the answer to your question is no. The canvas is hard-coded to set the aspect-ratio of the source image, so unless it is exactly the same size and shape as your background element, the image will either get clipped or look weird.This is something that could potentially be fixed but I would need more information on exactly what your design does.On Jul 5, 2023, at 7:00 AM, Jay Smith ***@***.***> wrote: Hi @andrewstephens75 . Thanks for this component. I'm hoping to possibly use it in a small festival site that is using diffused dithered images in its marketing campaign. Can the component be used for a full width and height image background layer that fills the viewport in an object-fit: cover manner? I've tried a few things but not if it's worth pursuing further if the underlying component doesn't really support it. Thanks! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[jayrsmith]

Hi @andrewstephens75

Thanks so much for replying. Sorry for being so vague!

Here's a pen with the desired behaviour:
https://codepen.io/jaysmith/pen/VwVzBGg

[andrewstephens75]

And what exactly happens when you replace the img with as-dithered-image?

You can check the javascript console, there might be more information there.

[jayrsmith]

Here's a one-to-one replacement from <img>:
https://codepen.io/jaysmith/pen/wvQqYmQ

The aspect ratio of the image is not maintained as it attempts to fill the available viewport. Your explanation above makes sense as to why this is.