Ширина на 100%, но контент все еще не заполняет страницу

Question

Я пытаюсь создать адаптивный веб-сайт с использованием HTML, CSS и Bootstrap 4, но, похоже, возникают проблемы с получением ширины моей карусели для заполнения 100% экрана Pixel 2 XL (альбомная ориентация - w: 823px) иiPad (портрет - w: 768 пикселей).(См. Прилагаемые изображения)

Для других режимов экрана они полностью заполняются на 100%.Не уверен, что не так.Я попытался установить ширину тела и родителя: 100%, но все равно не работает для двух вышеупомянутых экранов.

Пиксель 2 XL пейзаж

iPad портрет

Вот мой код:

Карусель:

<div class="carousel-inner">
<div class="carousel-item">
  <img src="cats.jpg" alt="cats" width="1280" height="400">
  <div class="carousel-caption">
       <h2>Your Cat is Happy</h2>
       <p>Feed it more treats!</p>
       <button type="button" class="btn">BUY TREATS</button>
  </div>
</div>
</div>

CSS (обычный):

.carousel-inner img {
    filter: brightness(70%);
    width: 100%;
    height: 100%;
}

.carousel-caption {
    width:100%;
    max-height: 50%;
    left:0;
    margin-bottom:9%;
    text-align: left;
    padding-left: 60px;
    padding-right: 60px;
    font-family: Lato, sans-serif;
    -webkit-animation-name: caption_animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-iteration-count: 1;
    animation-name: caption_animation;
    animation-duration: 1s;
}

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

CSS (максимальная ширина экрана):

@media only screen and (max-width: 1025px){
    .carousel-item img {
        width: 100%;
        height: 60%;
    }

    .carousel-caption {
        margin-bottom: 130px;
        font-size: 12px;
        -webkit-animation-name: caption_animation 1s 1;
        animation-name: caption_animation 1s 1;
    }
}

Answer 1

используйте width:100% для img, как показано ниже:

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

Answer 2

.carousel-inner img {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: brightness(70%);
    width: 100%;
}

<div class="carousel-inner">
<div class="carousel-item">
  <img src="https://image.ibb.co/nsrpRz/111.jpg" alt="cats" width="1280" height="400">
  <div class="carousel-caption">
       <h2>Your Cat is Happy</h2>
       <p>Feed it more treats!</p>
       <button type="button" class="btn">BUY TREATS</button>
  </div>
</div>
</div>

Answer 3

нет необходимости устанавливать height: 100% для изображения для адаптивной цели, пожалуйста, посмотрите на обновленный ниже рабочий фрагмент, надеюсь, это поможет:)

.carousel-item img {
  filter: brightness(70%);
  width: 100%;
}

<!-- Carousel item: -->
<div class="carousel-item">
  <img src="http://placekitten.com/g/1280/400" alt="cats">
  <div class="carousel-caption">
    <h2>Your Cat is Happy</h2>
    <p>Feed it more treats!</p>
    <button type="button" class="btn">BUY TREATS</button>
  </div>   
</div>