Question

我正在尝试使用HTML，CSS和Bootstrap 4构建一个自适应网站，但似乎在使轮播宽度填满Pixel 2 XL屏幕的100％时遇到了问题（横向-w：823px）， iPad（纵向-w：768像素）。（请参阅所附图片）

对于其他屏幕模式，它们完全填充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（正常）：

.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

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

出于响应目的，无需将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>

Answer 3

使用width:100%进行img，如下所示：

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

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

3 个答案: