如何相对于视口大小调整轮播大小 Bootstrap 4.1.0答案

【问题标题】：How to size a carousel relative to the viewport size Boostrap 4.1.0如何相对于视口大小调整轮播大小 Bootstrap 4.1.0
【发布时间】：2018-04-30 22:53:55
【问题描述】：

目标

将轮播设置为视口大小的 60% x 60%。
使所有图像的大小与幻灯片相同。
使旋转木马流动起来。

有人知道如何实现吗？这对我来说似乎是一个顽固的问题。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div id="history-slideshow" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#history-slideshow" 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="#history-slideshow" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

</html>

谢谢！！

【问题讨论】：

标签： bootstrap-4 bootstrap-carousel

【解决方案1】：

在下面更改我的颜色代码以满足您的需要

/*
Removes white gap between slides - change to base color of slide images
*/
.carousel {
  background:#F5F5F5; 
}

.carousel-item .img-fluid {
  width:60%;
  height: 60%;
}

/* 
anchors are inline so you need it make them block to go full width
*/
.carousel-item a {
  display: block;
  width:60%;
  height: 60%;
}

.carousel-control-prev {
  color:#036;
  margin-left: -.5rem;
  z-index: 10;
}

.carousel-control-next {
  color:#036;
  margin-right: -.5rem;
  z-index: 10;
}

.carousel-control-prev:hover {
  color:#0084FF;
}

.carousel-control-next:hover {
  color:#0084FF;
}

如果你想为控件使用 fontawesome 图标，请使用它

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<i class="fas fa-chevron-circle-left fa-2x"></i>

<a class="carousel-control-next text-faded" href="#carouselExampleControls" role="button" data-slide="next">
<i class="fas fa-chevron-circle-right fa-2x"></i>

下一步

【讨论】：

用关闭每个控件。我不知道为什么它没有显示在我的代码中
不幸的是，在使用您的实现后，幻灯片占了 100% x 100% 的视口：/
取出显示
删除 w-100 后，当浏览器窗口处于全尺寸时，幻灯片的尺寸是正确的。但是，我需要幻灯片是流畅的，并且当我缩小视口的大小时它的尺寸不会变小。

【解决方案2】：

除了下面的css规则之外，我还把所有图片都做成了Bootstrap的.img-fluid的成员。

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: block;
}

.carousel {
  height: 60%;
  width: 60%;
}

.carousel-item {
  display: block;
  width: 100%;
  height: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div id="history-slideshow" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#history-slideshow" 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="#history-slideshow" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  
</body>

</html>

【讨论】：