Object-fit: cover?

Question

Object-fit: cover?

jayrsmith opened this issue a year ago · comments

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 · Answer 1 · Thu Jul 06 2023 02:12:30 GMT+0800 (China Standard Time)

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: ***@***.***>

Jay Smith · Answer 2 · Thu Jul 06 2023 07:50:09 GMT+0800 (China Standard Time)

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 · Answer 3 · Thu Jul 06 2023 10:49:28 GMT+0800 (China Standard Time)

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.

Jay Smith · Answer 4 · Thu Jul 06 2023 11:42:19 GMT+0800 (China Standard Time)

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.