I have my swiper inside a mat dialog with slidesPerView: 1. The height is set as 100%. But I can't seem to make the width of the overall container equal to the active slide. I have an image inside each slide with margin: auto, thus centering the image. But i don't want the extra white spaces on each side of the image. Of course I could set the width to 100%, but I only want the height as 100% and the natural width of the image, no stretching horizontally. I tried using width: fit-content, on swiper, .swiper-wrapper. But this doesn't work. Using width: fit-content on .swiper-slide just sticks the images together(i-e., more than one image is displayed in the view). For large screens the swiper looks even uglier because of more extra space.
This is what I have
This is what I want. Of course the navigation controls would be as the same above, just on top of the picture.
