引导轮播中的媒体查询答案

【问题标题】：media queries in bootstrap carousel引导轮播中的媒体查询
【发布时间】：2019-09-14 23:14:51
【问题描述】：

我正在尝试使用引导程序制作简单的轮播，但我遇到了图像大小问题，我希望它是全屏图像。这是否意味着我必须添加媒体查询？如果是，我该怎么做？

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

【问题讨论】：

标签： html css bootstrap-4 media-queries

【解决方案1】：

不，您不必添加媒体查询。将图像宽度设置为 100%。给每张图片一个 img-fluid 类，并将你的 body margin 设置为 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>

【讨论】：

身高过高怎么办？我需要图像与屏幕完全一样