ट्विटर बूटस्ट्रैप कैरोसेल स्लाइड पर "पृष्ठभूमि-आकार: कवर" लागू करें

Question

मैं तीन स्लाइड्स के साथ मूल बूटस्ट्रैप कैरोसेल के साथ काम कर रहा हूं। स्लाइडर को लागू करने से पहले, मेरे पास अपने संबंधित div की सीएसएस पृष्ठभूमि-छवि के माध्यम से एक स्थिर छवि थी। मेरे सीएसएस में, मैं पृष्ठभूमि आकार का उपयोग कर रहा था: कवर, और वास्तव में जिस तरह से छवि ने विभिन्न ब्राउज़र चौड़ाई का जवाब दिया था उसे पसंद किया। मेरी छवि की चौड़ाई के आधार पर, मैं छवि के महत्वपूर्ण भाग को हमेशा दृश्यमान और केंद्रित रहने के लिए प्राप्त कर सकता था, जबकि दोनों तरफ अतिरिक्त चौड़ाई केवल एक अतिरिक्त प्रभाव के रूप में वाइडस्क्रीन मॉनीटर पर दिखाई दे रही थी।

मैं उसी छवि व्यवहार को अब बनाए रखना चाहता हूं कि मैं बूटस्ट्रैप कैरोसेल का उपयोग कर रहा हूं, लेकिन अगर मैं स्लाइड के व्यूपोर्ट में आयाम असाइन करता हूं, तो भी मुझे अपनी पृष्ठभूमि छवियों को दिखाने के लिए नहीं मिल सकता है। मैंने वर्तमान में इसे स्थापित किया है ताकि प्रत्येक स्लाइड एक अलग सीएसएस वर्ग प्रदर्शित करे, और प्रत्येक के पास एक अलग पृष्ठभूमि छवि हो ताकि वह तीन छवियों के बीच स्क्रॉल कर सके।

यदि पृष्ठभूमि-छवि के माध्यम से यह संभव नहीं है, तो छवि तत्वों में हेरफेर करने का यह एक और तरीका है ताकि उनका प्रदर्शन व्यवहार पृष्ठभूमि आकार के समान हो: कवर?

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

और मेरे सीएसएस:

#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 है!

Answer 1

मुझे पता है कि मेरी प्रतिक्रिया काफी देर हो चुकी है, लेकिन मुझे बस कुछ ऐसा करने के लिए खोज के माध्यम से आपका प्रश्न मिला। सबसे पहले, आपको HTML से छवियों को हटाने की आवश्यकता है और कैरोसेल के अंदर वर्ग "आइटम" के साथ सभी divs की ऊंचाई लागू करने के लिए सीएसएस को थोड़ा सा बदलना होगा।

अपने कोड के लिए अपने संशोधनों को लागू करने यह कुछ इस तरह होना चाहिए:

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

और सीएसएस:

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

Answer 2

कवर कोड के 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 पूरा होने तक कैरोसेल छिपाने की आवश्यकता हो सकती है। मैं दृश्यता करने का सुझाव देता हूं: सीएसएस स्तर पर छवियों के लिए छुपा हैक। तो उपयोगकर्ताओं को बड़ी स्क्रीन पर छवि वृद्धि पर ध्यान नहीं दिया जाएगा।

Answer 3

बस इस कोडपेन https://codepen.io/wisnust10/pen/mPJwWv/ जो एक अन्य समाधान का उपयोग करता है। (सीएसएस देखें)

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

क्रोम और आईई में इसका परीक्षण किया और यह चाल है।

आशा है कि यह किसी भी तरह से मदद कर सकता है।