Question

我正在尝试制作其中一个现代设计，其中在网页主页的顶部有一个图像轮播。

我正在使用Bootstrap 3，到目前为止我已经设法让它按照应有的方式运行，但我觉得这只会发生在我的屏幕上，因为我使用固定比例进行部分工作，因此图像看起来很完美我的屏幕，所以他们都有相同的宽度和高度。这是它的外观：

enter image description here

如果这些图像显示在更薄的屏幕上，我猜不会有问题，或者会出现问题？我仍然要测试这个，但我很确定没有任何问题;无论如何，这对我来说并不是什么大问题，我专注于另一个问题。但如果它们显示在更宽的屏幕上，则会出现一个丑陋的边框，如下所示：

enter image description here

看起来非常糟糕，我认为我应该将图像居中，并以与图像一致的方式处理这些边框，就像图像和边框都是一个整体一样。有任何想法吗？

此外，我还需要重新定位旋转木马滑动按钮以安装在图像中而不是外部。我不确定如何做到这一点。

这里是您需要的代码：

<!-- Carousel -->
<div class="this-centrar-contenido this-margen-vertical">
  <div id="carousel-inicio" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-inicio" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-inicio" data-slide-to="1"></li>
      <li data-target="#carousel-inicio" data-slide-to="2"></li>
      <li data-target="#carousel-inicio" data-slide-to="3"></li>
      <li data-target="#carousel-inicio" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img/img1.jpg">
        <div class="carousel-caption">
         text
        </div>
      </div>

      <div class="item">
        <img src="img/img2.jpg">
        <div class="carousel-caption">
          text
        </div>
      </div>

      <div class="item">
        <img src="img/img3.png">
        <div class="carousel-caption">
          text
        </div>
      </div>

      <div class="item">
        <img src="img/img4.png">
        <div class="carousel-caption">
          text
        </div>
      </div>

      <div class="item">
        <img src="img/img5.png">
        <div class="carousel-caption">
          text
        </div>
      </div>
    </div> <!-- /.carousel-inner -->
  </div> <!-- /#carousel-inicio -->

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-inicio" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left this-icono-grande"></span>
  </a>
  <a class="right carousel-control" href="#carousel-inicio" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right this-icono-grande"></span>
  </a>
</div> <!-- /.col-md-12 -->
<!-- /Carousel -->

自定义css（其余为Bootouse 3默认为旋转木马）

.carousel-control
{
    height: 600px;
}

Answer 1

为了拟合图像，我将图像用作每个div.item的背景图像，并在css中设置background-size: cover;。为此，每个div.item需要一个id或一个特定的类：

HTML：

<!-- Wrapper for slides -->
<div class="carousel-inner">

  <div id="img_1" class="item active">
    <div class="carousel-caption">
     text
    </div>
  </div>

  <div id="img_2" class="item">
    <div class="carousel-caption">
      text
    </div>
  </div>

  ...

  <div id="img_5" class="item">
    <div class="carousel-caption">
      text
    </div>
  </div>

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

CSS：

#img_1 {
background: url('img/img1.png') no-repeat center center;
background-size: cover;
}

#img_2 {
background: url('img/img2.png') no-repeat center center;
background-size: cover;
}

...

#img_5 {
background: url('img/img2.png') no-repeat center center;
background-size: cover;
}

现在，您对不同的视口没有任何问题。更改浏览器窗口的大小以进行测试。

为不够宽的主页图像提供伪装

1 个答案: