Image crops upon resizing the browser - html

Question

I created a simple slideshow, but upon resizing the browser. Images get cropped. I tried all different ways, but couldn't make it.
Here is a sample of html code:
<div class="carousel">
<i class="fas fa-chevron-left" id="prevBtn"></i>
<i class="fas fa-chevron-right" id="nextBtn"></i>
<div class="carousel-inner">
<div class="slide-item">
<div class="caption">
<h1>First Slide</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" width="100%" alt="">
</div>
</div>
...
</div>
here is the css code:
.carousel {
position: relative;
width: 992px;
height: 400px;
margin: 0 auto;
padding: 0;
overflow: hidden;
.carousel-inner {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0px auto;
.slide-item {
position: relative;
display: inline-block;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
img {
width: 992px;
// height: 400px;
}
...
#media (max-width: 576px) {
.container,
.carousel,
.carousel-inner,
.slide-item {
max-width: 540px;
}
}
#media (min-width: 576px) {
.container,
.carousel,
.carousel-inner,
.slide-item {
max-width: 540px;
}
}
The slideshow looks fine in bigger screens but as we shrink down the size of browser images get cropped. Here is a codepen. I hope someone can solve it here, Thank you.

Answer 1

Try max-width: 100% in mobile
#media (max-width: 576px) {
.container,
.carousel,
.carousel-inner,
.slide-item {
max-width: 100%;
}
DEMO HERE