将“background-size: cover”应用于Twitter Bootstrap轮播幻灯片

11

我正在使用基本的Bootstrap Carousel,其中包含三个幻灯片。在实现幻灯片之前,我通过其各自div的css背景图像获得了一个静态图像。在我的CSS中,我使用了background-size:cover,并且非常喜欢图像对不同浏览器宽度的响应方式。根据我的图像宽度,我可以始终让图像的重要部分保持可见并居中,而两侧的额外宽度仅在宽屏监视器上作为附加效果可见。

现在我想保留相同的图像行为,但是即使我为幻灯片的视口分配了尺寸,我的背景图像仍然无法显示。我目前已将每个幻灯片设置为显示单独的css类,并且每个幻灯片都有不同的背景图像,以便可以在它们之间滚动三个图像。

如果无法通过background-image实现此目标,则还有其他方法可以操作图像元素,使其显示行为与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;
}

希望这不是一个愚蠢的问题,我们能够解决它!

4个回答

26

我知道我的回复有些晚了,但是我通过搜索找到了你的问题,想要做类似的事情。首先,你需要从HTML中删除图像,并稍微修改CSS,将高度应用于旋转木马中所有带有“item”类的div。

将我的修改应用到你的代码中,应该是这样的:

<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; 
}

谢谢您发布这个。我能够实现我想做的事情,但似乎无法向那些幻灯片添加文本。您有任何想法如何使用您的代码来实现吗?谢谢。 - AAA
我已经在代码中加入了幻灯片标题和文本的标记,只是一个包含标题和段落的“carousel-caption”类内部的div。我还将“active”类添加到第一个滑块上,否则它将无法正常工作。 - Ana Mendoza

8
这是与封面代码等效的jQuery代码:
 $.each( jQuery('.carousel .item'), function( i, val ) {
    $(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden');
  });

它需要图像源并将其传递给项目,然后隐藏实际图像。

此外,您可能需要在jQuery.each完成之前隐藏走马灯。我建议在CSS级别上对图像进行可见性:隐藏hack。这样,用户在更大的屏幕上不会注意到图像扩大。


不错的方法。但是如果JS被禁用,它将无法工作。 - jaysingkar
6
如果禁用JS,旋转木马是否可用?禁用JS的用户应该自行承担其破坏用户体验的选择。 - KinsDotNet
不错 :) 必须设置 .carousel 和 .item 的高度,以防止巨大的图像破坏布局。 - Brainfeeder

1

刚刚发现了这个Codepen https://codepen.io/wisnust10/pen/mPJwWv/,它使用了另一种解决方案。(请查看CSS)

.item:nth-child(1) {
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }

我在Chrome和IE浏览器中测试过,它可以解决问题。

希望它能在某种程度上帮到你。


0
在“.item”类中使用“background属性”和“img”标签是不必要的。

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}

.item {
    width: 100%;
    height: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center;
}
/*
img {                
    object-fit: cover;
}
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div id="myCarousel" class="carousel slide">

    <!-- Carousel items -->
    <div class="carousel-inner">
    
        <div class="item active" style="background-image: url(https://dummyimage.com/300x200/000/fff)" >
<!--            <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/1200x800/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
        </div>
        
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Codepen

  • 编辑器
  • 全屏视图
  • 图片版本


    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接