Black borders on the left/right on some configurations

nbarrett commented 9 months ago

What is the expected behavior?

First of all, thanks so much @MurhafSousli for a fantastic library!
When I choose imageSize = cover, slides should autosize so that there are no black borders on the left/right.

What is the current behavior?

On the ngx-ramblers framework, which uses ngx-gallery as one of the rendering options:

when I choose thumbPosition = left example this happens correctly
when I choose thumbPosition = bottom example the rendering problem happens

I think the first one works okay because the width is reduced to under the required viewport of 1080px. Even if I set the width on the gallery component to 1080px it makes no difference.

What are the steps to reproduce?

See the above links

What is the use-case or motivation for changing an existing behavior?

Gallery doesn't look quite as good when there are black borders, and like the author of ngx-gallery, I'm want perfection!

Which versions are you using for the following packages?

Angular: 16.2.9 Angular CDK: 16.2.9 Angular CLI:16.2.9 Typescript: 4.9.5 Gallery: 11.0.0

Is there anything else we should know?

MurhafSousli commented 9 months ago

I cannot debug that examples you provided because autoplay is on, maybe if you provide a stackblitz

nbarrett commented 9 months ago

Hello again @MurhafSousli - I've turned off autoplay on those 2 examples so it should be more debugable now 👍

MurhafSousli commented 9 months ago

it appears you haven't set the imageSize to cover, it is set to contain by default. if you cannot set it to cover, try to reproduce your issue in a stackblitz and I can help you further

MurhafSousli / ngx-gallery