相关疑难解决方法(0)

跳跃的标题和演示说明了一切.Bootstrap 4的新旋转木马没有响应.图像超出了它们的宽高比.

有人知道如何在不对css和html进行重大调整的情况下解决这个问题吗？

.wrapper {
  max-width:200px;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide">
    </div>
  </div>
</div>
</div>

有没有办法让你的图像在bootstrap的旋转木马响应固定高度？我已经尝试了一切.我也使用了img-responsive,在CSS中我也尝试了一切.

这是我的HTML

    <div class="item active">
      <img src="images/slide1.jpg" alt="First slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption" style="padding-bottom:90px;">
          <h1>Totes for all</h1>
          <p>Personalize your style</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

    <div class="item">
      <img src="images/slide2.png" alt="Second slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <div class="caption_background">
          <h1>Pattern it</h1>
          <p>Choose your favorite</p>
          </div>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <a class="left carousel-control" href="#myCarousel" role="button" …

我有一个旋转木马,背景图像类似于这个网站

我有图像,我想延伸到浏览器宽度的100%.当用户缩小其浏览器的宽度时,应在右侧和左侧裁剪图像.不应调整图像大小(高度变化的位置).我正在使用标准的Bootstrap轮播布局

最终结果应该是这样的

中间的蓝色矩形是容器,其宽度应始终保持不变.在到达此容器的边框之前,背景图像(带有鞋子的深绿色)应该随着浏览器宽度的减小而右侧和左侧裁剪.

最好的方法是什么？