如何在Bootstrap 4.1.0中设置轮播图为视口的60%×60%？

嘿，别发愁，这几个要求其实都能通过简单的CSS调整+Bootstrap自带特性实现，我给你一步步拆解：

1. 设置轮播为视口的60%×60% #

我们可以用**视口单位（vw/vh）**直接绑定轮播尺寸和视口比例，这是最直接的方法。给轮播容器加自定义样式：

.custom-carousel {
  width: 60vw; /* 宽度为视口宽度的60% */
  height: 60vh; /* 高度为视口高度的60% */
  margin: 0 auto; /* 可选：让轮播居中显示 */
}

然后把这个类加到你的.carousel容器上就行。

2. 让图片和幻灯片尺寸完全匹配 #

Bootstrap的轮播幻灯片默认是自适应的，但图片可能因自身比例导致撑破或留白。我们可以给图片设置强制填充，同时保持比例：

.custom-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填满容器，裁剪多余部分，保持比例 */
  /* 如果不想裁剪，想用留白保持比例，可以换成 object-fit: contain; */
}

这样不管图片原始尺寸如何，都会严格匹配幻灯片大小。

3. 实现响应式（fluid） #

因为我们用了vw/vh单位，轮播会自动跟着视口大小缩放，天然就是响应式的。再加上Bootstrap轮播本身的响应式基础处理，在手机、平板、桌面端都会自动适配。

完整代码示例 #

把这些整合到你的代码里，大概是这样：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 必须加，确保视口正确识别 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <style>
    .custom-carousel {
      width: 60vw;
      height: 60vh;
      margin: 2rem auto;
    }
    .custom-carousel .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="carouselExampleSlidesOnly" class="carousel slide custom-carousel" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="your-image-1.jpg" class="d-block w-100" alt="Image 1">
      </div>
      <div class="carousel-item">
        <img src="your-image-2.jpg" class="d-block w-100" alt="Image 2">
      </div>
      <div class="carousel-item">
        <img src="your-image-3.jpg" class="d-block w-100" alt="Image 3">
      </div>
    </div>
  </div>

  <!-- 别忘了加Bootstrap的JS依赖，轮播需要它工作 -->
  <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>

几个小提醒：

• 一定要加<meta name="viewport" content="width=device-width, initial-scale=1">，不然移动端视口识别会出问题，响应式就白搭了。
• object-fit属性在现代浏览器都支持，如果要兼容极旧的IE，可能需要用背景图方式替代，但现在一般不用考虑了。
• 如果你的轮播需要左右控制按钮，它们的位置会跟着轮播容器自动调整，不用额外改样式。

内容的提问来源于stack exchange，提问作者srpalo