รูปภาพ Bootstrap Carousel ไม่ได้จัดแนวอย่างถูกต้อง

โปรดดูภาพต่อไปนี้เรากำลังใช้ bootstrap carousel เพื่อหมุนภาพ อย่างไรก็ตามเมื่อความกว้างของหน้าต่างมีขนาดใหญ่รูปภาพจะไม่สอดคล้องกับเส้นขอบอย่างถูกต้อง

แต่ตัวอย่างภาพหมุนที่จัดทำโดย bootstrap ทำงานได้ดีเสมอไม่ว่าหน้าต่างจะกว้างขนาดไหนก็ตาม ตามรหัส

ใครสามารถอธิบายได้ว่าทำไมม้าหมุนจึงมีพฤติกรรมแตกต่างกัน สิ่งนี้เกี่ยวข้องกับขนาดภาพหรือไม่หรือมีการกำหนดค่า bootstrap บางส่วนหรือไม่

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

วิธีแก้ไขคือใส่โค้ด CSS นี้ลงในไฟล์ CSS ที่กำหนดเอง:

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

ด้วย bootstrap 3 เพียงเพิ่มคลาสที่ตอบสนองและศูนย์:

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

การดำเนินการนี้จะปรับขนาดภาพโดยอัตโนมัติและจัดกึ่งกลางภาพ

แก้ไข:

ด้วย bootstrap 4 เพียงเพิ่มimg-fluidคลาส

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

ฉันประสบปัญหาเดียวกันและแก้ไขด้วยวิธีนี้: เป็นไปได้ที่จะแทรกเนื้อหาที่ไม่ใช่รูปภาพลงใน Carousel เพื่อให้เราใช้งานได้ ก่อนอื่นคุณควรแทรกdiv.inner-item(ซึ่งคุณจะจัดตำแหน่งกึ่งกลาง) จากนั้นแทรกรูปภาพภายใน div นี้

นี่คือรหัสของฉัน (Ruby):

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

และรหัส css ของฉัน (.scss):

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

แม้ว่าคำตอบของvekozlovจะทำงานใน Bootstrap 3 เพื่อจัดกึ่งกลางภาพของคุณ แต่ก็จะแตกเมื่อภาพหมุนถูกลดขนาดลง: รูปภาพจะคงขนาดไว้แทนที่จะลดขนาดลงด้วยม้าหมุน

ให้ทำสิ่งนี้กับภาพหมุนระดับบนสุดแทนdiv:

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

สิ่งนี้จะอยู่ตรงกลางของภาพหมุนทั้งหมดและป้องกันไม่ให้ขยายเกินความกว้างของภาพของคุณ (เช่น 900 พิกเซลหรืออะไรก็ได้ที่คุณต้องการตั้งค่า) อย่างไรก็ตามเมื่อภาพหมุนถูกลดขนาดลงภาพจะลดขนาดลงด้วย

แน่นอนคุณควรใส่ข้อมูลสไตล์นี้ในไฟล์ CSS / LESS ของคุณ

ใน Bootstrap 4 คุณสามารถเพิ่มmx-autoคลาสลงในimgแท็กของคุณได้

ตัวอย่างเช่นหากรูปภาพของคุณมีความกว้าง 75% ควรมีลักษณะดังนี้:

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

Bootstrap จะแปลmx-autoเป็น:

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

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

มันอาจมีส่วนเกี่ยวข้องกับสไตล์ของคุณ ในกรณีของฉันฉันใช้ลิงก์ภายใน div "item" หลักดังนั้นฉันต้องเปลี่ยนสไตล์ชีตเพื่อพูดสิ่งต่อไปนี้:

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

ภายใต้รหัส boostrap ที่มีอยู่แล้ว:

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

ฉันคิดว่าฉันมีทางออก:

ในหน้าสไตล์ชีตส่วนตัวของคุณกำหนดความกว้างและความสูงให้ตรงกับขนาดรูปภาพของคุณ

สร้าง "คลาส" แยกเพิ่มเติมบน div ด้านบนที่เหมาะสมกับพื้นที่ที่มีช่วง ... (แสดงด้านล่าง)

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

โดยไม่ต้องแตะ bootstrap.css ในสไตล์ชีตของคุณเองให้เรียก "carousel" (หรือป้ายกำกับใดก็ได้ที่คุณเลือก) เพื่อให้ตรงกับความกว้างและความสูงของ pix เดิมของคุณ!

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

}

ดังนั้นในกรณีของฉันฉันใช้ภาพขนาดเล็ก 320x200 ในการหมุนด้วย อาจมีขนาดที่กำหนดไว้ล่วงหน้าใน bootstrap.css แต่ฉันไม่ชอบการเปลี่ยนแปลงดังนั้นฉันจึงสามารถพยายามอยู่กับรุ่นในอนาคตได้ หวังว่านี่จะช่วยได้ ~~

ฉันกำลังประสบปัญหาเดียวกันกับคุณ ตามคำแนะนำของ @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;
}

ลองทำตามนี้

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

รูปภาพของคุณมีความกว้าง 460px เท่ากับ span6 หรือไม่ ในกรณีของฉันด้วยขนาดภาพที่แตกต่างกันฉันใส่แอตทริบิวต์ความสูงให้กับรูปภาพเพื่อให้แน่ใจว่ามีความสูงเท่ากันทั้งหมดและภาพหมุนจะไม่ปรับขนาดระหว่างรูปภาพ

ในกรณีของคุณลองตั้งค่าความสูงเพื่อให้อัตราส่วนระหว่างความสูงนี้กับความกว้างของ Div ด้านในแบบหมุนของคุณเท่ากับอัตราส่วนของภาพ

วิธีแก้ปัญหาของ @Art L. Richards ไม่ได้ผล ตอนนี้ใน bootstrap.css โค้ดดั้งเดิมกลายเป็นแบบนี้

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

รหัสของ @ rnaka530 จะทำลายคุณสมบัติของของเหลวของ bootstrap

ฉันไม่มีทางออกที่ดี แต่ฉันได้แก้ไขแล้ว ผมสังเกตตัวอย่างเช่นม้าหมุนบูตของอย่างระมัดระวังhttp://twitter.github.com/bootstrap/javascript.html#carousel

ฉันพบว่าความกว้าง img จะต้องมากกว่าความกว้างของตาราง ในspan9ความกว้างสูงสุด 870px ดังนั้นคุณต้องเตรียมรูปภาพที่มีขนาดใหญ่กว่า 870px หากคุณมีคอนเทนเนอร์มากขึ้นนอก img เนื่องจากคอนเทนเนอร์ทั้งหมดมีขอบหรือขอบคุณสามารถใช้รูปภาพที่มีความกว้างน้อยกว่าได้

สำหรับภาพหมุนฉันเชื่อว่าภาพทั้งหมดต้องมีความสูงและความกว้างเท่ากันทุกประการ

นอกจากนี้เมื่อคุณอ้างถึงหน้านั่งร้านจาก bootstrap ฉันค่อนข้างมั่นใจว่า span16 = 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

ลิงค์ 1

แทรกสิ่งนี้ในคลาส div พาเรนต์ css ที่ภาพหมุนของคุณอยู่

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

CSS

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