Làm thế nào để mở rộng băng chuyền hình ảnh Bootstrap Twitter cho các hình ảnh động, có kích thước trung tâm

Question

Tôi đang cố gắng mở rộng băng chuyền hình ảnh Bootstrap mặc định để hỗ trợ hình ảnh có kích thước động (tối đa 500x400), tập trung cả theo chiều ngang và chiều dọc. Ngoài ra, tôi muốn duy trì bố cục phụ đề gốc, chú thích đặt chú thích ở cuối hình ảnh, với chú thích div mở rộng hoàn toàn trên hình ảnh (nhưng không có thêm nữa.)

Tôi đã đặt cùng một câu đố , mà là một thực hiện khá sạch của thiết lập mặc định Bootstrap (chỉ có 4 phong cách thêm vào cuối phần css):

http://jsfiddle.net/rdugan/JFBFU/26/

tôi có thể khá dễ dàng thực hiện các yêu cầu định tâm và chú thích ngang bằng cách thêm một div 'nội tuyến' xung quanh hình ảnh và chú thích, và sử dụng 'text-align: center' trên bố mẹ. Thay vào đó, tôi cũng đã thử sử dụng 'display: table-cell' (và các kiểu centering kèm theo) trên các div khác nhau với các kết quả khác nhau - trong một số trường hợp khác. trường hợp tôi mess lên các chức năng băng chuyền, trong khi ở những người khác tôi thực hiện trung tâm hình ảnh, nhưng mất chú thích neo đậu.

Bất kỳ gợi ý nào sẽ được đánh giá cao - đã đập đầu tôi vào cái này trong một thời gian dài.

Answer 1

Bạn có thể tập trung theo chiều ngang với các quy tắc:

.carousel-nội {text-align: center; }

.carousel .item> img {display: inline-block; }

Đối với việc xếp thẳng đứng bạn nên kiểm tra này: http://www.student.oulu.fi/~laurirai/www/css/middle/

Và để giữ tỷ lệ khía cạnh hình ảnh trên thay đổi kích thước bạn chỉ cần thay đổi chỉ có chiều rộng hoặc chỉ chiều cao của hình ảnh không được cả hai tại một thời gian và nó sẽ thay đổi kích thước với tỷ lệ ban đầu của nó.

Answer 2

Sử dụng thuộc tính background CSS trực tiếp trên div chứa mục carousel:

Trong * .html:

<div class="item" style="background-image: url('[path-to-image].png')"> 
    <!-- omit the <img> tag --> 
    <!-- the rest of the stuff that was in the <div> goes here --> 
</div> 

Trong * .css:

.carousel .item { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Tuy nhiên, điều này dường như phá vỡ các mũi tên điều hướng băng chuyền.

Answer 3

cố gắng sử dụng đoạn mã này

.carousel-inner > .item > img { 
    min-width: 100%; 
}