Currently working on a shop's image carousel where I'm implementing scroll-snap-type: x mandatory; for the container and scroll-snap-align: center; for the images. However, running into a challenge where the container sometimes exceeds the width of the uploaded images, leading to visibility issues.
To address this, I've set the height of tall images to 100% and the width to auto to avoid distortion. Yet, this approach results in adjacent images peeking into the carousel view.
Seeking a solution to display only one image at a time, I considered using margin to center each image:
img {
margin: 0 calc((100% - 'width of the image') /2);
}
This method would ideally add margins to correctly center the image within the carousel. Is there a way to dynamically retrieve the 'width of the image', or any alternative recommendations?
Appreciate your help!