Question

我使用Bootstrap v4.0.0-beta.3，我尝试使用bootstrap carousel组件构建一个滑块。我有一个问题，强制旋转木马使图像覆盖整个可见屏幕，同时保持正确的图像宽高比。这是我的代码：

＆＃13;

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.16rem;
  color: #242424;
  scroll-behavior: smooth;
  background-color: #fafdff;
}

.item img {
  width: 100%;
  min-height: 100%;
}

.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 100vh;
}

header a {
  color: #B1B1B1;
}

header a:hover {
  color: #f2f2f2;
  border: 0;
}

#main-navbar {
  background-color: rgba(51, 51, 51, 0.9);
}

a:hover {
  color: orange;
  text-decoration: none;
  border-bottom: 3px solid;
}

p {
  line-height: 1.71em;
  text-rendering: optimizeLegibility;
}

footer {
  color: #B1B1B1;
  font-size: 1.1rem;
}

.navbar-brand {
  letter-spacing: 1.0rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.1);
}

article h1 {
  padding-top: 4.5rem;
  margin-top: -4.5rem;
}

@media (min-width: 768px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 992px) {
  .nav-link {
    font-size: 0.89em;
  }
}

@media (min-width: 1200px) {
  .container {
    min-width: 1300px;
  }
}

@media (min-width: 3840px) {
  .container {
    min-width: 1300px;
  }
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" href="css/override.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <title>Hello, world!</title>
</head>

<body id="welcome" data-spy="scroll" data-target="#main-navbar" data-offset="40">
  <header>
    <nav id="main-navbar" class="navbar navbar-expand-lg fixed-top navbar-dark">
      <div class="container">
        <a class="navbar-brand" href="#">DEMO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#welcome">Welcome!

              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#aboutme">About Me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#learning-progress">Learning Progress</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Drop a Word</a>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!-- <div class="bg-image"></div> -->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="" src="https://s9.postimg.org/6hpyg806n/image.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="" src="https://s9.postimg.org/6hpyg806n/image.jpgg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="" src="https://s9.postimg.org/6hpyg806n/image.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <main>
    <article class="container">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis assumenda explicabo nam natus sapiente. Optio dolores illum mollitia, alias suscipit dolorum facere dolor ex nisi architecto, temporibus quod sapiente reiciendis? Aspernatur exercitationem
        nihil voluptatem qui dicta? Atque, eligendi unde. Quas ut earum eaque repellendus dolorem aliquam dolore voluptas, et velit beatae voluptates
        <a href="#">isrem ipsum dolor sit amet consectetur</a> hic. Mollitia quaerat perferendis molestiae esse vitae voluptatem. Debitis voluptates aliquid delectus! Similique iste hic, officia consequatur placeat quae consectetur? Sunt, ratione assumenda.
        Minus, iure explicabo, vitae vel repellendus incidunt eum natus cum, deserunt sequi earum deleniti accusantium! Architecto provident obcaecati aliquid assumenda minus quas nobis ducimus libero harum natus ea quasi quod, nulla accusamus sunt delectus
        corporis nemo consequatur consequuntur perspiciatis ipsam reiciendis expedita error! Aliquid, exercitationem. voluptates dicta! Corrupti impedit ullam molestias quibusdam, ratione temporibus? Aut, sequi repellendus. Eius quas, quae ducimus aut
        obcaecati aliquam minus? Dolor, ipsum repudiandae. Magni, dicta omnis deserunt officiis consequuntur aspernatur perspiciatis, sit excepturi quis reiciendis illum alias soluta facilis at temporibus autem architecto ipsam numquam nobis natus ipsa
        totam. Nisi? Mollitia corporis natus hic voluptatibus excepturi odio rem obcaecati saepe unde doloribus? Atque omnis expedita inventore deserunt voluptate sunt illo ut. Sequi ex, minima consectetur perspiciatis tempora asperiores nisi labore!
        Provident aperiam vitae velit unde ullam quibusdam, exercitationem cupiditate deleniti! Consequatur, error quasi sint quibusdam pariatur dicta impedit sapiente molestiae distinctio asperiores veritatis nostrum ut quia temporibus accusamus at doloribus.
        Ipsa illum cumque suscipit ea assumenda asperiores voluptatem recusandae dolores veritatis pariatur optio fugiat, corporis doloribus necessitatibus? Perspiciatis eos labore at debitis. Quae facilis voluptates exercitationem placeat libero! Rem,
        deleniti! Officiis blanditiis doloribus ab similique, sequi eaque in labore? Quasi inventore nostrum explicabo expedita illo tenetur dolor eveniet a porro, possimus voluptas suscipit, itaque eaque ratione. Quibusdam quaerat cumque blanditiis.
        Mollitia quia, possimus aspernatur dignissimos consequuntur officiis, sequi minima eos nobis nesciunt, perferendis culpa praesentium doloribus aliquam voluptates! Consequatur hic voluptatum eveniet possimus praesentium officiis commodi porro laborum
        error. Optio. Culpa vero suscipit quo nulla enim quia assumenda quaerat repudiandae at. Unde voluptatum doloremque quaerat officiis, quia facere. Rem enim amet ipsam sint earum facere non unde accusamus ad esse! Ex, eveniet quo officia doloremque
        eligendi amet quos exercitationem saepe fugit aperiam recusandae rem placeat mollitia sunt reprehenderit blanditiis eius nulla, dignissimos a. Nihil ad voluptatibus, quis recusandae vitae minus. Debitis nulla maiores sint earum praesentium nemo
        dolore numquam perspiciatis esse eaque laborum corporis repudiandae quam adipisci, alias placeat voluptatum ab? Amet quidem qui optio, natus officia tempora et eaque.</p>
    </article>
    <article id="aboutme">
      <div class="container">
        <h1>About Me</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores fugit rem voluptas, pariatur quos dolores totam adipisci culpa dignissimos, illo, perferendis corporis nesciunt. Officiis placeat maiores aspernatur, quos magni neque. Excepturi
            suscipit incidunt eaque reprehenderit ratione pariatur voluptatem, et magni numquam quisquam adipisci officiis! Libero culpa similique non dolorem tenetur et eligendi dolore animi, inventore sit harum quo maiores fugiat? Molestias, nobis blanditiis
            officiis neque, explicabo suscipit unde, minus enim vitae architecto ducimus non ex dicta quidem illum nemo facilis necessitatibus magnam optio dolorum. Molestias similique praesentium reprehenderit dolores eligendi. Voluptatum sit, cumque,
            voluptas nobis adipisci rem quidem expedita explicabo quaerat ut recusandae corrupti fuga modi esse! Vel eveniet laudantium possimus asperiores fuga consequuntur. Eveniet corrupti tempore reprehenderit provident libero. Iste expedita itaque,
            sit aperiam fugit ea commodi qui delectus adipisci perspiciatis, repellendus pariatur facilis ut. Accusamus, illo similique mollitia, beatae nemo architecto laudantium cumque repudiandae reprehenderit, commodi non eaque! Unde maxime quas qui
            veniam accusantium impedit enim modi perspiciatis odit nemo, quaerat temporibus architecto neque tempora distinctio cumque reiciendis fugiat eius sunt esse voluptate, velit possimus commodi. Saepe, cupiditate. Illum expedita ratione blanditiis
            aperiam dolorem quisquam, accusamus animi itaque nesciunt molestias doloremque architecto eveniet aliquid libero dicta dolores sunt omnis tempora voluptates debitis adipisci perspiciatis! Est cupiditate similique tempore? At qui, beatae quia
            adipisci sequi reiciendis provident, corrupti amet minima optio, molestiae excepturi consequuntur earum! Alias maiores commodi cum dignissimos, esse consectetur tempore asperiores in, distinctio consequatur porro libero. Incidunt itaque quam
            soluta saepe quod ipsam reiciendis fugiat similique at quos consequatur explicabo, in, amet fuga recusandae cupiditate sunt? Labore, nihil aspernatur at commodi fuga magni vitae perspiciatis asperiores. Velit modi eum debitis quidem praesentium
            quia maiores labore quas delectus sapiente at natus, adipisci fuga exercitationem cupiditate deleniti! Accusantium quisquam suscipit similique at ullam asperiores praesentium aut illo voluptatum! Corporis sapiente, repellendus animi corrupti
            maiores, at commodi amet asperiores magnam, quidem eos. Minus molestiae, ducimus ex, odio expedita quo perspiciatis veritatis vel fugiat, odit earum fuga ipsam vitae. Itaque. Illo nemo eveniet vel ullam, deleniti est tenetur quas ut corrupti
            harum assumenda quae esse impedit pariatur velit adipisci vitae earum aperiam dolor! Error voluptas natus eius commodi nemo fuga. At, error. Natus magnam quisquam libero consectetur provident, perspiciatis quia labore nam nostrum officia autem
            consequatur voluptate quaerat laudantium dolorem dicta molestiae. Magni, sapiente? Obcaecati quidem laudantium iure harum delectus? Rerum, officia dolore quidem animi nobis impedit, tempore veritatis laboriosam vel ad blanditiis! Quibusdam
            nesciunt quia unde nam incidunt odio impedit neque mollitia alias iure exercitationem, temporibus quasi atque non? Quasi rerum aliquam distinctio commodi praesentium deleniti, repellendus asperiores fugiat, blanditiis molestias voluptates
            ullam molestiae? Ullam maiores, impedit recusandae deserunt voluptatum eveniet molestias dolore aperiam optio, commodi facilis. Voluptatem, velit? Praesentium officia velit sapiente similique ut dolorem esse explicabo. Ullam necessitatibus
            quae quia odit est doloribus, voluptas assumenda optio tenetur soluta fugit nesciunt, provident, iure asperiores. Id iure laudantium libero. Dolorem ipsum cupiditate itaque. Pariatur esse quisquam eaque quasi! At similique saepe ad veniam
            laboriosam optio incidunt ea ipsam eum, autem sint vitae culpa! Excepturi reiciendis consequatur veritatis beatae ea! Commodi sequi minus voluptatem, facilis officiis voluptate sunt cum consequuntur quam possimus, eveniet consequatur, vitae
            deleniti. Dolores beatae ducimus aspernatur ipsa, quis ad, sunt iusto placeat, inventore dicta architecto laboriosam. Facere in placeat omnis recusandae, odit doloribus! Adipisci magni explicabo perferendis, provident voluptas quas, nulla,
            vitae facere eum maiores laboriosam itaque. Quos mollitia unde quibusdam iste voluptates, sit autem voluptatibus! Hic, officia maxime unde eligendi ratione possimus totam rerum veniam nemo, iure, ut ipsam odio debitis est quod aliquam sit!
            Perferendis aperiam amet temporibus? Repellendus tempore voluptatibus ducimus a provident. Voluptatum minima quae laborum atque voluptatem, enim similique nihil quia? Laboriosam, porro? Ad facere aliquam non rem repellat magni corporis, deleniti
            nisi! Exercitationem ex assumenda excepturi rerum, est sint? Non? Sequi ratione veritatis quo! Aperiam, ut velit cupiditate quidem excepturi commodi voluptas quas blanditiis magni itaque ipsam nam voluptatum fuga architecto voluptatibus porro,
            quod esse. Autem nisi ex natus sint! Cumque provident voluptate exercitationem, quas animi quisquam. Id magnam aliquam asperiores? Non esse libero ad voluptatem tempore explicabo necessitatibus voluptatibus porro doloribus maiores, officia
            incidunt temporibus sapiente et dolore modi. Eligendi consectetur dolorem ad harum debitis alias. Placeat, incidunt aspernatur fugiat veritatis cum at quam mollitia a odit velit. Facilis accusantium rem vel animi ipsa ex voluptates sequi sapiente
            eum. Eum beatae maiores incidunt iure ipsam asperiores at, accusamus tenetur, aliquam repellat numquam natus omnis dicta similique mollitia alias perferendis quaerat magnam neque vel laborum possimus tempore praesentium. Qui, veniam? Sed ad
            iusto nostrum quasi enim, recusandae non quo harum sequi natus deserunt nemo, dolorem necessitatibus. Similique aliquam minima accusantium iusto doloribus corrupti, maiores exercitationem quasi voluptatem aspernatur velit sunt? Sint aut fuga
            cum voluptatum. Libero reprehenderit deserunt provident explicabo vitae sit, id, sunt placeat aperiam nesciunt nobis exercitationem obcaecati modi doloremque possimus aliquam veniam dolores error facere! Molestiae, numquam. Suscipit possimus
            eius molestiae, dolor corporis, dicta, animi sequi explicabo nobis dolorem magni unde voluptas nam tempore nesciunt reiciendis molestias quidem quasi praesentium non hic doloremque vel consequuntur? Voluptatem, enim. Illo reprehenderit ipsa
            dicta dolorum voluptatum earum provident quo eius architecto delectus cumque tempora quidem sapiente nisi eos ut vitae, aliquid eveniet, quas repellat soluta suscipit. Sint quibusdam illo cupiditate! Fugit voluptatum dolorem excepturi, incidunt
            animi esse, mollitia vitae, inventore pariatur omnis minus! Aperiam aliquam neque natus itaque ut error iste ea iusto officiis cumque at nobis, perferendis iure aut!</p>
      </div>
      <!--container END-->
    </article>
    <article id="learning-progress" class="container">
      <h1>Learning Progress</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi voluptas illum deserunt assumenda odio quas voluptatibus explicabo, ut voluptatem error asperiores, et aut aperiam nam doloribus magni ratione atque incidunt? Consectetur ex iure voluptatum
        similique nemo nihil assumenda voluptatem dolore perferendis cumque, at provident officiis temporibus ea quam magnam et! Tempora quos ducimus aperiam sed nobis tenetur explicabo minima distinctio! Sunt necessitatibus voluptatibus nobis eius animi
        id, suscipit sequi magni fugiat hic mollitia officiis dicta. Debitis blanditiis maiores harum expedita, tempora odio saepe sunt provident atque molestias? Deleniti, iure accusamus! Consectetur aut, ab culpa reprehenderit nostrum, autem voluptatibus unde minima odit? Porro provident excepturi odit suscipit iste optio, facilis, earum fugiat mollitia velit in magni nostrum laudantium doloremque ipsam hic explicabo rem asperiores maiores corporis repellat adipisci voluptates reprehenderit
        vitae. At! Sapiente modi natus dolore voluptates labore aut animi maxime esse voluptatibus, cupiditate dignissimos quo perspiciatis nemo beatae minus. Veniam accusantium aliquid voluptate provident tempora cupiditate dolorem distinctio impedit?
        Quibusdam, voluptates? Accusantium, nostrum facere obcaecati quasi rerum porro, perferendis inventore facilis adipisci laudantium repellendus beatae libero numquam assumenda iure accusamus tenetur rem voluptates vel nesciunt temporibus iste? Ut
        ipsa facilis pariatur? Quibusdam cum, nam ducimus ipsam deserunt mollitia voluptates aliquam cupiditate voluptatem reprehenderit, possimus eum illum saepe harum? Expedita facere optio laborum voluptas. Maxime minus, repellat molestiae blanditiis
        eveniet in similique! Saepe, libero. Perspiciatis dolore quos quidem impedit aut? Delectus magnam ipsam molestias laudantium odit blanditiis molestiae ab eligendi, a odio repudiandae accusantium modi. Quos harum eius dicta consequuntur corrupti
        assumenda? Exercitationem doloribus inventore voluptatum esse suscipit nihil obcaecati eius perspiciatis quo accusantium, nisi eum provident facere doloremque. Ad harum exercitationem eos. Porro tempora ducimus natus consequuntur vel, assumenda
        aliquid officia? Nisi saepe dolorum nihil, amet laborum mollitia corporis quibusdam vero soluta architecto doloremque vitae, blanditiis exercitationem odio. Voluptatum officia illum, harum voluptatem repellendus in, deleniti modi facere, alias
        consequuntur soluta. Est quis quibusdam corporis iusto rem optio dolor maiores earum neque? Pariatur est accusantium incidunt excepturi deserunt, voluptatum dolorem ex maiores saepe! Impedit at earum ipsum! Molestiae, cupiditate? Illum, eaque!
        Optio omnis adipisci officia perferendis laborum voluptates harum, officiis a in quis minima soluta rerum cumque atque sed consequatur modi, suscipit eius accusamus inventore ipsa libero quae aperiam odit? Atque. Quae harum veritatis, veniam quos
        fuga pariatur hic aliquid dicta aperiam? Vel praesentium voluptate accusantium perspiciatis quos. Cum facilis quasi accusantium laborum illo alias laboriosam, enim, minima, et velit animi. Animi mollitia dolorum nobis qui iste sit officia veniam
        debitis fuga dignissimos recusandae iusto libero, doloremque provident reprehenderit omnis nihil laboriosam? Minus quaerat facere commodi aliquam itaque, debitis obcaecati laboriosam? Quia ex fugiat, corrupti similique voluptatibus id, iste voluptate,
        est commodi tempore et rerum! Fugit nisi consequatur explicabo, sapiente deserunt repellendus omnis natus itaque alias dolor doloribus. Dicta, rem deleniti? Voluptates aliquam velit exercitationem temporibus magnam. Libero, vitae, vel aliquam
        sed accusamus veniam quas delectus ipsum omnis impedit totam eligendi, asperiores incidunt corrupti consequatur hic. Magnam quia neque velit quibusdam! Ut voluptatibus facilis nam architecto doloremque molestiae accusamus minima commodi libero,at. Quasi fuga in illum officia voluptas accusamus? Magni delectus totam cupiditate. Debitis iure temporibus dignissimos modi excepturi architecto nobis ad numquam, magnam nemo cum labore ullam nostrum eligendi eveniet est esse delectus suscipit
        soluta deleniti a explicabo. Nostrum quaerat voluptatibus laudantium. Debitis veniam quidem odit magni quae facilis obcaecati nihil optio alias nemo, repellendus sint eligendi ratione in non placeat? Numquam aspernatur, sequi illum architecto
        deleniti quisquam exercitationem aliquid at eaque.</p>
    </article>
    <article id="contact" class="container">
      <h1>Contact</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati perferendis dolores, maxime asperiores laudantium aut aliquid nostrum! Nam officia iusto, quidem itaque aliquid sapiente provident qui, distinctio doloremque esse reprehenderit.
        Eum blanditiis corporis, id iure doloribus expedita magnam odit, tempora maiores, pariatur quas consequuntur. Enim, quis ad beatae a modi, dicta esse, magnam ipsa iusto amet perferendis omnis eum eaque. Non aperiam pariatur tempora libero eveniet,
        voluptatem minus aliquid exercitationem sed voluptas necessitatibus numquam recusandae velit, laboriosam illo doloribus error enim porro! Repellat, quis. Iure accusantium suscipit similique molestiae recusandae. Delectus doloremque dolor dolorum
        odio, explicabo vitae fuga, rem ipsa quod animi nisi dolores porro magnam sed libero vero repudiandae. Dolorum aliquam eos inventore deserunt nesciunt, sequi dignissimos dicta labore? Odio nostrum similique assumenda pariatur eum molestias harum
        minus, atque maxime accusamus ipsam recusandae inventore voluptas error numquam eius! Repudiandae animi eligendi adipisci doloremque eaque eveniet nihil architecto modi maiores? Delectus, ducimus? Delectus mollitia aperiam a, odit accusantium consequuntur, in voluptatum cupiditate cum sint. Consequatur provident natus nemo aut eum mollitia distinctio,
        voluptatibus iusto nisi doloribus illum cum fugiat nulla sapiente ipsam earum alias numquam, mollitia expedita placeat. Blanditiis dolorum voluptatum amet est incidunt deleniti sit in placeat consectetur nemo fuga corporis, dicta quasi a tenetur
        obcaecati reiciendis praesentium nesciunt, perferendis repellendus quaerat officiis vitae aliquid aperiam. Ipsam! Perspiciatis, quidem praesentium fugiat quae amet distinctio nihil architecto quis enim. Dolorum deleniti et provident rerum velit
        in quos incidunt, qui dignissimos eveniet architecto eius, dicta, nihil possimus soluta similique! Autem aliquid debitis id impedit harum quas repudiandae eligendi esse, quos deleniti incidunt ipsam, dicta odio asperiores, sint ratione voluptas.
         iste quia laborum inventore distinctio perspiciatis commodi dolores. Tenetur omnis dicta nostrum minus numquam dolorem quas totam aliquid. Nesciunt ratione ullam nihil nobis rerum. Aliquid tempore voluptatibus voluptatem maiores non. Dolore numquam
        dignissimos voluptas inventore unde harum vel. Repudiandae nemo sint iusto corrupti autem atque ex ducimus ipsam at veniam quisquam debitis asperiores, numquam consequatur esse odit soluta fuga quaerat quis. Fuga perspiciatis quae accusantium
        ipsum corporis hic! Non reprehenderit qui necessitatibus harum adipisci debitis dolorem praesentium eligendi voluptatibus voluptas ex recusandae commodi culpa, nam temporibus in beatae modi doloremque vero architecto consequuntur! Sint sequi repellendus
        ipsum soluta! Labore saepe quibusdam sit voluptatum vitae accusamus officia quis illum repellendus consequatur voluptas sapiente esse, placeat omnis neque, earum ad ullam consequuntur illo. Sit vitae fugiat placeat, debitis laudantium voluptates.
        Aliquam doloremque iure neque officia totam ipsa magnam praesentium earum? Deleniti nulla culpa ducimus suscipit sequi debitis delectus, quas animi, maxime porro consequuntur! Porro amet neque eos dolores optio voluptas.</p>
    </article>
  </main>
  <footer class="bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-4">
          <p>Col 1</p>
        </div>
        <div class="col-4">
          <p>Col 2</p>
        </div>
        <div class="col-4">
          <p>Col 3</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  <script src="./js/script.js"></script>
</body>

</html>

＆＃13;

这是一个有效的网站：http://mkubicki.ayz.pl/test/#welcome

正如你所看到的那样，图像太大了，看起来高度受导航尺寸的影响（只是观察，我不确定这是否真实）。我希望旋转木马覆盖整个屏幕，有趣的是id在某些浏览器窗口大小上执行：

我想保持图像长宽比，我不介意裁剪。

Bootstrap v4.0.0-beta.3轮播+响应式图像保持宽高比

0 个答案: