कैरोसेल के भीतर फिट करने के लिए ट्विटर बूटस्ट्रैप 3 छवि कैरोसेल ऑटो आकार बदलने की छवि कैसे बनाएं?

Question

मुझे अपनी छवियों को बॉक्स में फिट करने की कोशिश करने में समस्याएं आ रही हैं।

मैं चाहता हूं कि वे अपने पहलू अनुपात, आकार, आयामों को रखें लेकिन कैरोसेल बॉक्स में फिट/सिकुड़ें।

के रूप में आप im आधा छवि उपलब्ध नहीं देख सकते हैं, इस वजह से मैं एक सेट ऊंचाई है, लेकिन मैं ऑटो आकार के लिए यह चाहते हिंडोला बॉक्स में फिट करने के लिए है कि अगर समझ में आता है ...

www.bollinbuild.co.uk/index.html वह जगह है जहां आप कार्रवाई में कैरोसेल देख सकते हैं।

प्रत्येक छवि में आयाम में बड़ा आकार होता है तो कैरोसेल इसलिए मैं आधा छवि और गुणवत्ता खो देता हूं।

3 छवियों का उपयोग कर रहे हैं;

www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg

इस

मेरी कोड है,

सीएसएस

<style type="text/css"> 

.item{ 
    text-align: center; 
    width: auto; 
} 

.bs-example{ 
    margin: 10px; 
} 

.slider-size { 
height: 300px; /* This is your slider height */ 

} 
.carousel { 
width:80%; 
margin:0 auto; /* center your carousel if other than 100% */ 
} 
</style> 

एचटीएमएल

<div class="container"> 
<div class="row"> 

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Carousel indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <div style="background:url(/images/1.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/2.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/3.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
     </div><!-- /.END CAROUSEL DIV --> 
    </div><!-- /.END MYCAROUSEL DIV --> 
</div><!-- /.END BSEXAMPLE --> 
</div> 
</div> 

मैं टैग में बल्कि तो एक div के रूप में छवियों को लगाने के बारे में और एक पृष्ठभूमि यूआरएल के रूप में पढ़ा है, लेकिन im अभी भी पूर्ण छवि नहीं मिल रहा कैरोसेल में बैठना

Replace the image with a container div using the image file as a background. 
Set width to 100% so it will expand to fill it’s container. Set the height of the slider so it will have a consistent display regardless of the image size. 
Win 

स्रोत http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Answer 1

इसके बजाय, अपने चित्रों को एक div की पृष्ठभूमि बनाने उन्हें उन div में एक वास्तविक <img/> तत्व के रूप में डाल दिया है और उन्हें 100% की ऊंचाई (ऊंचाई चुन क्योंकि देने की

आपकी ऊंचाई चौड़ाई से पहले टूट जाएगी क्योंकि आपके पास विस्तृत छवियां हैं)।

यह

<div class="slider-size"> 
    <img src="/images/1.jpg" style="height: 100%;" /> 
</div> 

इसके बजाय इस

<div style="background:url(/images/1.jpg) center center; background-size:cover;" class="slider-size"></div> 

CSS मीडिया क्वेरी के

:

/* Mobile */ 
@media (max-width: 767px) { 
    .slider-size { 
     height: auto; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* tablets */ 
@media (max-width: 991px) and (min-width: 768px) { 
    .slider-size { 
     height: auto; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* laptops */ 
@media (max-width: 1023px) and (min-width: 992px) { 
    .slider-size { 
     height: 200px; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* desktops */ 
@media (min-width: 1024px) { 
    .slider-size { 
     height: 300px; 
    } 
    .slider-size > img { 
     width: 60%; 
    } 
}