将“background-size：cover”应用于Twitter Bootstrap旋转木马幻灯片

我正在使用带有三张幻灯片的基本Bootstrap旋转木马。在我实现滑块之前，我有一个静态图像通过其各自的div的CSS背景图像。在我的CSS中，我使用了background-size：cover，并且非常喜欢图像响应不同浏览器宽度的方式。根据图像的宽度，我可以让图像的重要部分始终保持可见和居中，而任一侧的额外宽度仅在宽屏显示器上可见，作为附加效果。将“background-size：cover”应用于Twitter Bootstrap旋转木马幻灯片

我想保留现在使用Bootstrap的Carousel时的相同图像行为，但即使将尺寸指定给幻灯片的视口，仍然无法显示背景图像。我现在已经设置好了，所以每张幻灯片都显示一个单独的CSS类，每个幻灯片都有不同的背景图片，因此可以在三张图片之间滚动。

如果这不可能通过背景图像，它有另一种方式来操纵图像元素，使他们的显示行为是相同的背景大小：盖？

这里是我的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; 
}

但愿这不是一个愚蠢的问题，我们可以算出来！

来源

2012-11-30 Betafresh Media

我知道我的回复很晚，但我只是通过搜索找到您的问题来做类似的事情。首先，您需要从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; 
}

来源

2013-02-14 20:28:11

感谢您发布此信息。我能够实现我想要做的事情，但似乎无法将文本添加到这些幻灯片中。任何想法，我会怎么做你的代码？感谢 – AAA

我已经修改了代码标记为幻灯片标题和文本，里面只与类“旋转木马字幕”有一个标题和段落中的股利。我还添加了“积极”级到第一滑动，就不能正常工作，否则。 –

这就像魅力...谢谢，这是节省很多时间...... –

这是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级别的图像隐藏黑客。所以用户不会在更大的屏幕上看到图像放大。

来源

2014-01-16 12:43:39 tolginho

那里的好方法。但是如果JS被禁用，它将不起作用。 – jaysingkar

传送带甚至与JS禁用工作？ js残障人士应该处理他们的选择，以打破用户体验。 – KinsDotNet

不错:)不得不设置.carousel和.item的高度，以防止巨大的图像炸毁布局。 – Brainfeeder

刚刚发现这个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测试这和它的伎俩。

希望它能帮助某种方式。

来源

2017-08-22 20:00:21 bluedot

将“background-size：cover”应用于Twitter Bootstrap旋转木马幻灯片

回答

相关问题