本文介绍了套用「background-size:cover」到Twitter Bootstrap Carousel幻灯片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用带有三个幻灯片的基本Bootstrap Carousel.在实现滑块之前,我通过其相应div的css background-image获得了一个静态图像.在我的CSS中,我使用的是background-size:cover,并且非常喜欢图像响应不同浏览器宽度的方式.根据图像的宽度,我可以使图像的重要部分始终保持可见和居中,而两侧的额外宽度只有在宽屏显示器上才能看到,这是附加的效果.

I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image responded to different browser widths. Depending on the width of my image, I could get the important section of the image to always stay visibile and centered, while the extra width on either side was only visible on widescreen monitors as an added effect.

我现在要保持相同的图像行为,因为我正在使用Bootstrap的旋转木马,但是即使我为幻灯片的视口指定了尺寸,我仍然无法显示背景图像.我目前已经设置好了,因此每张幻灯片都显示一个单独的css类,并且每张幻灯片都有不同的背景图片,因此可以在三张图片之间滚动.

I want to retain that same image behavior now that I'm using Bootstrap's Carousel, but even if I assign dimensions to the slide's viewport, I still can't get my background images to show up. I currently have it set up so each slide displays a separate css class, and each one has a different background image so it can scroll between three images.

如果无法通过background-image实现,则还有另一种方法来处理图像元素,使其显示行为与background-size:cover?相同.

If this is not possible via background-image, it there another way to manipulate image elements so their display behavior is the same as background-size:cover?

这是我的HTML:

 <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item ad1">
      <img src="{{ STATIC_URL }}img/TestBannerAd.png">
    </div>
    <div class="item ad2">
      <img src="{{ STATIC_URL }}img/TestBannerAd2.png">
    </div>
    <div class="item ad3">
      <img src="{{ STATIC_URL }}img/TestBannerAd3.png">
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我的CSS:

#myCarousel {
    width: 100%;
}
.carousel-control {
    margin-top: 20px;
}
.carousel-inner {
    width: 100%;
    height: 400px;
}
.ad1 {
    background: url(../img/TestBannerAd.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad2 {
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad3 {
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

希望这不是一个愚蠢的问题,我们可以解决!

Hopefully this isn't a stupid question and we can figure this out!

推荐答案

我知道我的回复已经很晚了,但是我只是通过搜索来发现您的问题,并做了类似的事情.首先,您需要从HTML中删除图像并稍作更改以将高度应用于轮播中类别为"item"的所有div.

I know my response is quite late, but I just found your question through a search to do something similar. First of all, you need to remove the images from the HTML and change a bit the CSS to apply the height to all divs with class "item" inside the carousel.

将我的修改应用于您的代码,应该是这样的:

Applying my modifications to your code it should be something like this:

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
     <div class="item active ad1">
        <div class="carousel-caption">
           <h4>First Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
     </div>
     <div class="item ad2">
        <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
     </div>
     <div class="item ad3">
        <div class="carousel-caption">
           <h4>Third Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

和CSS:

#myCarousel {
    width: 100%;
}
.carousel-control {
    margin-top: 20px;
}
.carousel-inner .item {
    width: 100%;
    height: 400px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad1 {
    background: url(../img/TestBannerAd.png) no-repeat center center fixed;
}
.ad2 {
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed;
}
.ad3 {
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed;
}

这篇关于套用「background-size:cover」到Twitter Bootstrap Carousel幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 11:54
查看更多