Изображение обрезается при изменении размера браузера

Question

Я создал простое слайд-шоу, но после изменения размера браузера. Изображения обрезаются. Я пробовал все по-разному, но не смог сделать это.

Вот пример html кода:

 <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>

Вот код css:

.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;
  }
}

Слайд-шоу прекрасно выглядит на больших экранах, но при уменьшении размера изображения браузера обрезаются. Вот кодекс . Я надеюсь, что кто-то может решить это здесь, спасибо.

Answer 1

Попробуйте max-width: 100% в мобильном телефоне

@media (max-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 100%;
  }

ДЕМО ЗДЕСЬ