html - Bootstrap crousell 响应式大小调整

Question

我在我的引导 html 网站上有一个轮播。代码如下所示：

  <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="d-block w-auto h-auto" src="header/1.png" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-auto h-auto" src="header/2.png" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-auto h-auto" src="header/3.png" alt="Third slide">
  </div>
</div>

当我在桌面上打开页面时，标题看起来很棒，图片就像我想要的那样。但是当我在移动设备上打开页面（或像移动设备一样缩放它）时，图片看起来会消失。

我也尝试了 w-100 和 h-100，但这也会产生不太好的结果。

有任何想法吗？

标签： htmltwitter-bootstrapresponsivesizing

Answer 1

你试过用它做img-fluid吗？这样，即使在移动设备上，图像也能保持其比例并保持 100% 的宽度。所以你的代码会变成：

<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="d-block img-fluid" src="https://picsum.photos/id/40/1920/1080" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://picsum.photos/id/50/1920/1080" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://picsum.photos/id/60/1920/1080" alt="Third slide">
  </div>
</div>

这是一个工作示例： https ://www.codeply.com/p/lICErBIvlN

如果您希望轮播具有 100% 的高度和宽度，我建议您添加它w-100，vh-100这样可以始终保持设备的 100% 高度。object-fit: cover还像这样向 img添加一个：

.carousel-item img {
    object-fit: cover;
}

这object-fit: cover;使得无论屏幕尺寸如何，图像都将始终被覆盖。

还有旋转木马：

<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="d-block w-100 vh-100" src="https://picsum.photos/id/40/1920/1080" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100 vh-100" src="https://picsum.photos/id/50/1920/1080" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100 vh-100" src="https://picsum.photos/id/60/1920/1080" alt="Third slide">
  </div>
</div>

这是一个工作示例：https ://www.codeply.com/p/ihFFFtlpAx