как сделать так, чтобы изображение слайдера в моей карусели было отзывчивым

Question

Я пытался воссоздать навигационную панель / заголовок / ползунок следующим образом https://matchthemes.com/demohtml/dina/index.html
Однако у меня проблема с изображением ползунка карусели. Он выглядит хорошо, когда он находится в форме веб-страницы, но когда я уменьшаю его до мобильной формы, мое изображение не изменяется в размере, аналогичном ползунку карусели. Ниже приведено изображение того, что я имею в виду.

мобильная форма

форма веб-сайта

Это мой HTML-код для каруселислайдер

         <section class="container-fluid carouselcontainer"> 
            <section id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <section class="carousel-inner">
                <section class="item active">
                  <img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
                </section>

                <section class="item">
                  <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
                </section>

                <section class="item">
                  <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
                </section>
              </section>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </section>
        </section>

Это мой CSS. Это только 1 строка. Это единственный известный мне способ изменить размер карусели и изображения

.carousel-inner {
width:100%;
height:830px;
}

Answer 1

Попробуйте сделать ширину вашего изображения карусели 100%

.carousel-inner .item img {
      width: 100%;
}

Answer 2

Вы можете использовать изображение в фоновом режиме с "background-image:url('..');", например

<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>

Вам нужно немного CSS в классе предметов, чтобы настроить изображения по своему усмотрению.

Пример

.item{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat ;  
  background-size: cover ;
  background-position: center ;
}

Answer 3

Как насчет того, чтобы позволить браузеру выбрать лучшее изображение?

img {
  max-width: 100%;
}

и прочитать следующую ссылку

https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html

и использовать "img srcset"

Answer 4

Это ваше решение

 /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 


<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Вы также можете отредактировать или просмотреть код здесь Ссылка на код