Object-fit: cover?
jayrsmith opened this issue · 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!
Thanks so much for replying. Sorry for being so vague!
Here's a pen with the desired behaviour:
https://codepen.io/jaysmith/pen/VwVzBGg
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.
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.