बूटस्ट्रैप हिंडोला छवि ठीक से संरेखित नहीं करता है

Question

कृपया निम्नलिखित छवि पर एक नज़र डालें, हम छवियों को घुमाने के लिए बूटस्ट्रैप हिंडोला का उपयोग कर रहे हैं। हालाँकि, जब विंडो की चौड़ाई बड़ी होती है, तो छवि सीमा के साथ ठीक से संरेखित नहीं होती है।

लेकिन बूटस्ट्रैप द्वारा प्रदान किया गया हिंडोला उदाहरण हमेशा ठीक काम करता है, चाहे खिड़की की चौड़ाई कोई भी हो। कोड का पालन करना।

क्या कोई समझा सकता है कि हिंडोला अलग व्यवहार क्यों कर रहा है? क्या छवि आकार या कुछ बूटस्ट्रैप कॉन्फ़िगरेशन के साथ ऐसा करने के लिए कुछ भी गायब है?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </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>
</div>

Comments

क्या आपकी सभी छवियां समान चौड़ाई की हैं? इसके अलावा, क्या वे अपने .span6कंटेनर में खिंचाव करते हैं ?

— एंड्रेस इलिच

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

— नंबि

मैं इस समस्या में भी भाग गया, और यह काफी निराशाजनक था। मेरे लिए, यह पता चला है कि यह इसलिए हो रहा था क्योंकि हिंडोला वाले डिओड की एक निश्चित चौड़ाई थी जो हिंडोला की तुलना में व्यापक थी।

— वूइंफ्सटैट

शायद ईमेल पता छिपाना एक अच्छा विचार होगा :)

— tgdn

Answer 1

समाधान इस सीएसएस कोड को अपनी कस्टम सीएसएस फ़ाइल में डालना है:

.carousel-inner > .item > img {
  margin: 0 auto;
}

Comments

यह मेरे लिए काम किया! मैं vekozlov विधि की कोशिश की है, लेकिन काम नहीं किया, यह काम करता है! बहुत बहुत धन्यवाद

— आह-शिआंग

छवियों की विभिन्न ऊंचाइयों के लिए हिंडोला की ऊंचाई बदलती है, इसलिए आपको सीएसएस में एक निश्चित चौड़ाई को परिभाषित करने की आवश्यकता होगी।

— क्वांटम हाइव

उत्तम! उम्मीद है कि यह सिर्फ 'बिल्ट-इन' बीएस क्लास होगा जैसे कि .ousousel-img-center या कुछ और।

— कोडफिनिटी

मैं मार्जिन की कोशिश करेंगे, लेकिन मैं जोड़ने पाया height:noneकरने के लिए .carousel-inner > .item > imgडिफ़ॉल्ट से के लिए बेहतर परिणाम हो जाता हैheight:500px

— CrandellWS

आपको .carousel-inner > .carousel-item > img { margin: 0 auto; }बूटस्ट्रैप 4 के लिए करना चाहिए

— एक्सपेंक्टर

Answer 2

बूटस्ट्रैप 3 के साथ, बस उत्तरदायी और केंद्र कक्षाएं जोड़ें:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

यह स्वचालित रूप से छवि का आकार परिवर्तन करता है, और चित्र को केंद्र में रखता है।

संपादित करें:

बूटस्ट्रैप 4 के साथ, बस img-fluidक्लास जोड़ें

<img class="img-fluid" src="img/....jpg">

Comments

कोई फायदा नहीं हुआ शीर्ष मतदान समाधान की कोशिश की। यह बहुत क्लीनर, सरल और काम किया है। धन्यवाद!

— काइल

झुक और साफ। धन्यवाद

— chiefenne

पूर्ण धन्यवाद। मैं कसम खाता हूं कि मैंने इससे पहले ही गुगली कर दी और मुझे कोई जवाब नहीं मिला।

— चुड37

मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं और img-fluid क्लास छवियों को केंद्रित नहीं कर रहा है। वे सब जायज हैं।

— मैलेडोरडोर

@iaacp बस जोड़ने text-centerके लिए <div class="carousel-item">स्टार्ट टैग

— deanwilliammills

Answer 3

मैंने उसी समस्या का सामना किया और इसे इस तरह हल किया: कैरसेल को गैर-छवि सामग्री डालना संभव है, इसलिए हम इसका उपयोग कर सकते हैं। आपको पहले div.inner-item(जहां आप केंद्र संरेखण करेंगे) सम्मिलित करना चाहिए , और फिर इस div के अंदर छवि डालें।

यहाँ मेरा कोड है (रूबी):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </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>

और मेरा सीएसएस कोड (.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Comments

इस सीएसएस ने मेरे लिए बहुत काम किया, हिंडोला में छवियों की ऊंचाई को ठीक करने के अलावा

— स्पॉर्कइंटरवेंट

Answer 4

जबकि vekozlov का जवाब बूटस्ट्रैप 3 में आपकी छवि को केंद्र में रखने के लिए काम करेगा, यह तब टूटेगा जब हिंडोला नीचे स्केल किया गया हो: छवि हिंडोला के साथ नीचे स्केल करने के बजाय अपने आकार को बनाए रखती है।

इसके बजाय, यह शीर्ष-स्तरीय हिंडोला पर करें div:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

यह पूरे हिंडोला को केंद्रित करेगा और इसे आपकी छवियों की चौड़ाई (यानी 900 px या जिसे आप इसे सेट करना चाहते हैं) से आगे बढ़ने से रोकेंगे। हालांकि, जब हिंडोला नीचे पैमाने पर छवियों के साथ बढ़ाया जाता है।

आपको अपनी स्टाइलिंग की जानकारी अपने CSS / LESS फ़ाइल में डालनी चाहिए।

Answer 5

बूटस्ट्रैप 4 में, आप mx-autoअपने वर्ग जोड़ सकते हैंimg टैग में ।

उदाहरण के लिए, यदि आपकी छवि की चौड़ाई 75% है, तो इसे इस तरह दिखना चाहिए:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

बूटस्ट्रैप स्वचालित रूप से इसका अनुवाद करेगा mx-auto:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Answer 6

यह आपकी शैलियों के साथ कुछ कर सकता है। मेरे मामले में, मैं माता-पिता "आइटम" div के भीतर एक लिंक का उपयोग कर रहा हूं, इसलिए मुझे निम्नलिखित कहने के लिए अपनी स्टाइलशीट को बदलना पड़ा:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

preexisting बूस्टर कोड के तहत:

.carousel .item > img {
  display: block;
  line-height: 1;
}

और मेरी छवि इस तरह दिखती है:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Answer 7

मुझे लगता है कि मेरे पास एक समाधान है:

अपने व्यक्तिगत स्टाइल शीट पेज में, अपनी छवि आयामों से मिलान करने के लिए चौड़ाई और ऊंचाई असाइन करें ।

उस शीर्ष div पर एक अतिरिक्त पृथक "क्लास" बनाएं जो स्पेस को स्पैन के साथ विनियोजित करता है ... (नीचे दिखाया गया)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

अपने स्वयं के स्टाइल शीट में bootstrap.css को छूने के बिना, अपने मूल पिक्स की चौड़ाई और ऊंचाई से मेल करने के लिए "हिंडोला" (या जो भी लेबल आप चुनते हैं) को कॉल करें!

.carousel       {
            width: 320px;
            height: 200px;

}

तो मेरे मामले में, मैं के साथ हिंडोला करने के लिए छोटे 320x200 छवियों का उपयोग कर रहा हूँ। शायद बूटस्ट्रैप.css में पूर्व निर्धारित आयाम हैं, लेकिन मुझे यह बदलना पसंद नहीं है ताकि मैं भविष्य की रिलीज़ के साथ वर्तमान रहने की कोशिश कर सकूं। आशा है कि यह ~~ मदद करता है

Answer 8

मैं आपके साथ एक ही समस्या का सामना कर रहा हूं। @Thuliha के संकेत के आधार पर, निम्नलिखित कोडों ने मेरे मुद्दों को हल कर दिया है।

में htmlफ़ाइल, निम्न नमूना के रूप में संशोधित:

<img class="img-responsive center-block" src=".....png" alt="Third slide">

carousel.cssकक्षा में , संशोधित करें:

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Answer 9

इसे इस्तेमाल करे

    .item img{
      max-height: 300px;
      margin: auto;
    }

Comments

StackOverflow में आपका स्वागत है! यदि आप इस प्रश्न को हल कैसे करते हैं, तो आपके उत्तर से बहुत लाभ हो सकता है। कोड-ओनली उत्तर एसओ पर इतनी अच्छी तरह से प्राप्त नहीं होते हैं।

— रेने वोग्ट

Answer 10

क्या आपके चित्रों में स्पैन 6 की तरह 460px चौड़ाई है? मेरे मामले में, विभिन्न छवि आकारों के साथ, मैंने अपनी छवियों पर एक ऊँचाई की विशेषता को सुनिश्चित करने के लिए कहा कि वे सभी समान ऊँचाई के हैं और हिंडोला छवियों के बीच में आकार नहीं देता है।

आपके मामले में, इस ऊँचाई और आपके हिंडोला-भीतरी div की चौड़ाई के बीच का अनुपात इतनी ऊँचाई पर सेट करने का प्रयास करें जो आपकी छवियों के पहलू के समान हो

Comments

यह मदद नहीं करता है। क्या आपको लगता है कि छवि प्रारूप मायने रखता है? बूटस्ट्रैप उदाहरण JPEG फ़ाइलों का उपयोग करता है, जहाँ मैं PNG फ़ाइलों का उपयोग कर रहा हूँ। क्या इससे कोई फर्क पड़ता है

— नंबि

Answer 11

@ आर्ट एल रिचर्ड्स के समाधान से काम नहीं चला। अब bootstrap.css में, मूल कोड इस तरह का हो गया है।

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530 का कोड बूटस्ट्रैप की तरल विशेषता को तोड़ देगा।

मेरे पास एक अच्छा समाधान नहीं है लेकिन मैंने इसे ठीक किया। मैंने बूटस्ट्रैप के हिंडोला उदाहरण को बहुत ध्यान से देखा http://twitter.github.com/bootstrap/javascript.html#carousel ।

मुझे पता चला है कि img चौड़ाई ग्रिड चौड़ाई से बड़ा होना चाहिए। में span9, चौड़ाई 870px तक है, इसलिए आपको 870px से बड़ी छवि तैयार करनी होगी। यदि आपके पास img के बाहर अधिक कंटेनर है, क्योंकि सभी कंटेनर में बॉर्डर या मार्जिन कुछ है, तो आप छोटी चौड़ाई के साथ छवि का उपयोग कर सकते हैं।

Answer 12

हिंडोला के लिए, मेरा मानना ​​है कि सभी छवियों को बिल्कुल समान ऊंचाई और चौड़ाई होना चाहिए।

इसके अलावा, जब आप बूटस्ट्रैप से मचान पृष्ठ पर वापस आते हैं, तो मुझे पूरा यकीन है कि स्पैन 16 = 940px। इसे ध्यान में रखते हुए, मुझे लगता है कि हम यह मान सकते हैं कि यदि आपके पास ए

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

तो हां, आपको एक पंक्ति के भीतर स्पेस स्पेस सेट करते समय सावधान रहना होगा क्योंकि यदि छवि की चौड़ाई बड़ी है, तो यह आपके div को अगली "पंक्ति" में भेज देगा और यह कोई मज़ेदार नहीं है: P

लिंक १

Answer 13

इसे सीएसएस पैरेंट डिव क्लास पर डालें जहाँ आपका हिंडोला है।

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

सीएसएस

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}