Html 宽度为100%，但内容仍无法填满页面

我正试图用HTML、CSS和Bootstrap 4构建一个响应迅速的网站，但似乎在让我的旋转木马宽度填满Pixel 2 XL（横向-w:823px）和iPad（纵向-w:768px）的100%屏幕时遇到了问题。（见附图）

对于其他屏幕模式，它们完全填满了100%。不太确定出了什么问题。我已经尝试将主体和父对象设置为宽度：100%，但对于上述两个屏幕仍然不起作用

这是我的代码：

传送带项目：

<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（屏幕的最大宽度）：

---

无需将

height:100%

设置为图像以响应需要，请查看下面更新的工作片段，希望对您有所帮助：）

.carousel项目img{
滤光片：亮度（70%）；
宽度：100%；
}

你的猫很高兴
喂它更多的食物

买零食

使用

宽度：100%

到img，如下所示：

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

.carousel内部img{
显示：块；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
滤光片：亮度（70%）；
宽度：100%；
}

你的猫很高兴
喂它更多的食物

买零食

你好，琼斯，我可以帮你。但也请分享.carousel标题和.carousel itemHey@Rakesh的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;
    }
}

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