关于css：在Twitter Bootstrap Carousel幻灯片上应用” background-size：cover”


Apply “background-size:cover” to Twitter Bootstrap Carousel slides

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

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

如果无法通过background-image实现，则还有另一种方式处理图像元素，因此它们的显示行为与background-size：cover？

相同。

这是我的HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
  <!-- Carousel items -->
 
   
      <img src="{{ STATIC_URL }}img/TestBannerAd.png">
   
   
      <img src="{{ STATIC_URL }}img/TestBannerAd2.png">
   
   
      <img src="{{ STATIC_URL }}img/TestBannerAd3.png">
   
 
  <!-- Carousel nav -->

我的CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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;
}

希望这不是一个愚蠢的问题，我们可以弄清楚！

我知道我的回复已经很晚了，但是我只是通过搜索执行类似操作找到了您的问题。首先，您需要从HTML中删除图像并稍作更改以将高度应用于轮播中类别为" item"的所有div。

将我的修改应用于您的代码，应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <!-- Carousel items -->
 
     
       
           <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>
       
     
     
       
            <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>
         
     
     
       
           <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>
       
   
 
  <!-- Carousel nav -->

和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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;
}
相关讨论

相当于jQuery的封面代码：

1
2
3
 $.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级别隐藏图片的黑客。因此，用户不会在较大的屏幕上注意到图像放大。

相关讨论

刚刚找到了这个Codepen https://codepen.io/wisnust10/pen/mPJwWv/
这使用了另一种解决方案。 (请参阅CSS)

1
2
3
4
5
6
.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中对此进行了测试，可以解决问题。

希望它可以有所帮助。

不使用"。item "类和" img "标签中的"背景属性"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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;
}
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
       


    <!-- Carousel items -->
   
   
       
<!--            <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
       
       
       
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
       
       
       
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
       
       
   

    <!-- Left and right controls -->
   
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
   
   
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>

码笔

  • 编辑
  • 全图

    • img

    的版本