Question

我正在尝试使用自举程序制作简单的轮播，并且我对图像尺寸有疑问，我希望它是全屏图像。这是否意味着我必须添加媒体查询？如果是，我该怎么办？

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>
  </div>
  </div>

Answer 1

否，您不必添加媒体查询。将图像宽度设置为100％。给每个图像提供一类img流体并将您的身体边缘设为0

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1472722886393-f2f51e9deec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1531682607150-08b2476a545a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=742&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1498595664159-2df8dee7e63c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">
    </div>
</div>

引导轮播中的媒体查询

1 个答案: