Hình ảnh băng chuyền Bootstrap không căn chỉnh đúng cách

Hãy xem hình ảnh sau, chúng tôi đang sử dụng băng chuyền bootstrap để xoay hình ảnh. Tuy nhiên, khi chiều rộng cửa sổ lớn, hình ảnh không căn chỉnh đúng với đường viền.

Nhưng ví dụ về băng chuyền do bootstrap cung cấp luôn hoạt động tốt, bất kể chiều rộng của cửa sổ. Sau mã.

Ai đó có thể giải thích tại sao băng chuyền hoạt động khác nhau không? Đây có phải là bất cứ điều gì để làm với kích thước hình ảnh hoặc một số cấu hình bootstrap bị thiếu?

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

Giải pháp là đặt mã CSS này vào tệp CSS tùy chỉnh của bạn:

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

Với bootstrap 3, chỉ cần thêm các lớp đáp ứng và trung tâm:

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

Thao tác này sẽ tự động thay đổi kích thước hình ảnh và căn giữa hình ảnh.

Biên tập:

Với bootstrap 4, chỉ cần thêm img-fluidlớp

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

Tôi gặp phải vấn đề tương tự và giải quyết nó theo cách này: Có thể chèn nội dung không phải hình ảnh vào Carousel, vì vậy chúng tôi có thể sử dụng nó. Trước tiên, bạn nên chèn div.inner-item(nơi bạn sẽ căn chỉnh giữa), sau đó chèn hình ảnh vào bên trong div này.

Đây là mã của tôi (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>

Và mã css của tôi (.scss):

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

Trong khi câu trả lời của vekozlov sẽ hoạt động trong Bootstrap 3 để căn giữa hình ảnh của bạn, nó sẽ bị vỡ khi băng chuyền được thu nhỏ: hình ảnh vẫn giữ nguyên kích thước thay vì thu nhỏ bằng băng chuyền.

Thay vào đó, hãy thực hiện việc này trên băng chuyền cấp cao nhất div:

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

Điều này sẽ căn giữa toàn bộ băng chuyền và ngăn nó phát triển vượt quá chiều rộng của hình ảnh của bạn (tức là 900 px hoặc bất kỳ thứ gì bạn muốn đặt nó thành). Tuy nhiên, khi băng chuyền được thu nhỏ, hình ảnh sẽ giảm tỷ lệ theo đó.

Tất nhiên, bạn nên đưa thông tin tạo kiểu này vào tệp CSS / LESS của mình.

Trong Bootstrap 4, bạn có thể thêm mx-autolớp vào imgthẻ của mình .

Ví dụ: nếu hình ảnh của bạn có chiều rộng 75%, nó sẽ trông như thế này:

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

Bootstrap sẽ tự động dịch mx-autosang:

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

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

Nó có thể liên quan đến phong cách của bạn. Trong trường hợp của tôi, tôi đang sử dụng một liên kết trong div chính "item", vì vậy tôi phải thay đổi biểu định kiểu của mình để nói như sau:

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

theo mã boostrap hiện có:

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

và hình ảnh của tôi trông giống như:

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

Tôi nghĩ rằng tôi có một giải pháp:

Trong trang biểu định kiểu cá nhân của bạn, hãy chỉ định chiều rộng và chiều cao phù hợp với kích thước hình ảnh của bạn.

Tạo một "lớp" riêng biệt bổ sung trên div trên cùng đó chiếm không gian với các nhịp ... (Hình bên dưới)

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

Không cần chạm vào bootstrap.css, trong style sheet của riêng bạn, hãy gọi "carousel" (hoặc bất kỳ nhãn nào bạn chọn) để khớp với chiều rộng và chiều cao của pix gốc của bạn!

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

}

Vì vậy, trong trường hợp của tôi, tôi đang sử dụng hình ảnh 320x200 nhỏ để băng chuyền. Có thể có các kích thước đặt trước trong bootstrap.css, nhưng tôi không thích thay đổi điều đó để tôi có thể cố gắng duy trì hiện tại với các bản phát hành trong tương lai. Hy vọng điều này sẽ giúp ~~

Tôi đang đối mặt với cùng một vấn đề với bạn. Dựa trên gợi ý của @thuliha, các mã sau đã giải quyết được vấn đề của tôi.

Trong htmltệp, hãy sửa đổi như mẫu sau:

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

Trong carousel.css, sửa đổi lớp:

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

Thử cái này

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

Hình ảnh của bạn có chính xác chiều rộng 460px như span6 không? Trong trường hợp của tôi, với các kích thước hình ảnh khác nhau, tôi đặt thuộc tính chiều cao cho hình ảnh của mình để đảm bảo rằng tất cả chúng đều có cùng chiều cao và băng chuyền không thay đổi kích thước giữa các hình ảnh.

Trong trường hợp của bạn, hãy cố gắng đặt chiều cao sao cho tỷ lệ giữa chiều cao này và chiều rộng của div băng chuyền-bên trong giống với tỷ lệ khung hình của hình ảnh của bạn

Giải pháp của @Art L. Richards không thành công. bây giờ trong bootstrap.css, mã gốc đã trở thành như thế này.

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

Mã của @ rnaka530 sẽ phá vỡ tính năng linh hoạt của bootstrap.

Tôi không có một giải pháp tốt nhưng tôi đã sửa nó. Tôi đã quan sát rất kỹ ví dụ về băng chuyền của bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel .

Tôi phát hiện ra rằng chiều rộng img phải lớn hơn chiều rộng lưới. Trong span9, chiều rộng lên đến 870px, vì vậy bạn phải chuẩn bị một hình ảnh lớn hơn 870px. Nếu bạn có nhiều vùng chứa bên ngoài img, vì tất cả vùng chứa đều có đường viền hoặc lề, bạn có thể sử dụng hình ảnh có chiều rộng nhỏ hơn.

Đối với băng chuyền, tôi tin rằng tất cả các hình ảnh phải có cùng chiều cao và chiều rộng.

Ngoài ra, khi bạn tham khảo lại trang giàn giáo từ bootstrap, tôi khá chắc chắn rằng span16 = 940px. Với suy nghĩ này, tôi nghĩ chúng ta có thể giả định rằng nếu bạn có

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

Vì vậy, có, bạn phải cẩn thận khi đặt khoảng trắng trong một hàng vì nếu chiều rộng hình ảnh lớn, nó sẽ gửi div của bạn sang "hàng" tiếp theo và điều đó không vui: P

Liên kết 1

Chèn cái này vào lớp div cha css nơi băng chuyền của bạn.

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