as-dithered-image icon indicating copy to clipboard operation
as-dithered-image copied to clipboard

Published 20 hours ago • verified publisher icon andrewstephens75

Object-fit: cover?

Open jayrsmith opened this issue 1 year ago • 4 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!

jayrsmith avatar Jul 05 '23 11:07 jayrsmith

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

andrewstephens75 avatar Jul 05 '23 18:07 andrewstephens75

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

jayrsmith avatar Jul 05 '23 23:07 jayrsmith

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.

andrewstephens75 avatar Jul 06 '23 02:07 andrewstephens75

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.

jayrsmith avatar Jul 06 '23 03:07 jayrsmith