Center element of carousel

Issue

I'm making a carousel of images for a store. I'm using scroll-snap-type: x mandatory; on the container and scroll-snap-align: center; for the images on it. The problem is that the container is wider than some of the images, the images are uploaded by the user and sometimes are wide, sometimes are tall...

So, if the image is tall the height is set to 100% and the width is set to auto so it doesn't get deformed. But that makes the element show on the carousel... and a little bit of the next image shows up.

I'd like to make each image wide enough so that the carousel only shows one image at the time.

I thought using margin like this:

img {
  margin: 0 calc((100% - 'width of the image') /2);
}

That would make each image to have margin on both sides, show centered and make it the only element visible on the carousel.

Is there any way I can get that 'width of the image'? Any other suggestions?

Thanks!

Solution

You could use divs with width: 100% in the carousel such that there is exactly one element visible at all times. And then you put the imgs into the divs and horizontally center them (e.g. using margin: 0 auto). All of the elements should have height: 100%

Answered By - Linus