Width: 100% height: auto doesn't rescale images good-CodePudding

I am making a image caroussel for a product page and I am trying to keep all components resposive. My goal is to rescale an image so it fits a div with a size no bigger than 600px. It worked well on square and landscape images but the problem is that now portrait images (height > width) are being cut. I am using React and Material UI. Here is my code:

ProductPage.js:

<Box className='image-slider'>
    <CarouselProvider
        className='carousel'
        naturalSlideWidth={1}
        naturalSlideHeight={1}
        totalSlides={images.length}
    >
        <Box className='slider-and-buttons'>
            <Slider>
                {images.map((image, i) => (
                    <Slide index={i}>
                        <Box component="img"
                            className='product-image'
                            key={i}
                            alt="Image"
                            src={image}>
                        </Box>
                    </Slide>
                ))}
            </Slider>

            <IconButton as={ButtonBack} className='back-img'>
                <ArrowBackIosIcon />
            </IconButton>
            <IconButton as={ButtonNext} className='next-img'>
                <ArrowForwardIosIcon />
            </IconButton>
            
        </Box>
        
    </CarouselProvider>

</Box>

product-page.scss:

.image-slider{
    max-width: 600px;
    margin: 0 auto;
    
    .slider-and-buttons {
        position: relative;

        .product-image {
                width: 100%;
                height: auto;
            }
        
            .back-img {
                border: none;
                background: rgba(255, 255, 255, 0);
                position: absolute;
                top: 50%;
                right: 95%;
            }
        
            .next-img {
                border: none;
                background: rgba(255, 255, 255, 0);
                position: absolute;
                top: 50%;
                left: 95%
            }
    }
}

I have also tried to use object-fit: cover but that doesn't work at all and I am not sure why.

CodePudding user response：

I have managed to achieve my desired goal with this:

.image-slider{
    max-width: 600px;
    margin: 0 auto;
    
    .slider-and-buttons {
        position: relative;

        .product-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
       }
  }