將「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旋轉木馬幻燈片

回答

相關問題