Gambar Bootstrap Carousel tidak sejajar dengan benar

Silakan lihat gambar berikut, kami menggunakan korsel bootstrap untuk memutar gambar. Namun, jika lebar jendela besar, gambar tidak sejajar dengan tepi dengan benar.

Tetapi contoh carousel yang disediakan oleh bootstrap selalu berfungsi dengan baik, tidak peduli lebar jendelanya. Mengikuti kodenya.

Adakah yang bisa menjelaskan mengapa carousel berperilaku berbeda? Apakah ini ada hubungannya dengan ukuran gambar atau beberapa konfigurasi bootstrap hilang?

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

Solusinya adalah dengan memasukkan kode CSS ini ke dalam file CSS khusus Anda:

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

Dengan bootstrap 3, cukup tambahkan kelas responsif dan tengah:

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

Ini secara otomatis mengubah ukuran gambar, dan memusatkan gambar.

Edit:

Dengan bootstrap 4, cukup tambahkan img-fluidkelasnya

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

Saya menghadapi masalah yang sama dan menyelesaikannya dengan cara ini: Dimungkinkan untuk memasukkan konten non-gambar ke Carousel, jadi kami dapat menggunakannya. Anda harus memasukkan terlebih dahulu div.inner-item(di mana Anda akan membuat perataan tengah), dan kemudian menyisipkan gambar di dalam div ini.

Ini kode saya (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>

Dan kode css saya (.scss):

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

Sementara vekozlov jawaban akan berfungsi di Bootstrap 3 untuk memusatkan gambar Anda, jawaban itu akan rusak saat carousel diperkecil: gambar mempertahankan ukurannya alih-alih diperkecil dengan carousel.

Sebagai gantinya, lakukan ini di carousel level atas div:

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

Ini akan memusatkan seluruh carousel dan mencegahnya tumbuh melebihi lebar gambar Anda (yaitu 900 px atau apa pun yang Anda ingin atur). Namun, saat carousel diperkecil, gambar akan diperkecil dengannya.

Anda harus meletakkan info gaya ini di file CSS / LESS Anda, tentunya.

Di Bootstrap 4, Anda dapat menambahkan mx-autokelas ke fileimg tag .

Misalnya, jika gambar Anda memiliki lebar 75%, akan terlihat seperti ini:

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

Bootstrap secara otomatis akan diterjemahkan mx-autoke:

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

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

Ini mungkin ada hubungannya dengan gaya Anda. Dalam kasus saya, saya menggunakan link dalam div induk "item", jadi saya harus mengubah stylesheet saya untuk mengatakan yang berikut:

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

di bawah kode boostrap yang sudah ada:

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

dan gambar saya terlihat seperti:

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

Saya pikir saya punya solusi:

Di halaman lembar gaya pribadi Anda, tetapkan lebar & tinggi agar sesuai dengan dimensi gambar Anda.

Buat "kelas" terpisah tambahan di div atas yang menyesuaikan ruang dengan span ... (Ditunjukkan di bawah)

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

Tanpa menyentuh bootstrap.css, di style sheet Anda sendiri, panggil "carousel" (atau label apa pun yang Anda pilih) agar sesuai dengan lebar dan tinggi gambar asli Anda!

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

}

Jadi dalam kasus saya, saya menggunakan gambar berukuran 320x200 kecil untuk dijadikan carousel. Mungkin ada dimensi preset di bootstrap.css, tapi saya tidak suka mengubahnya jadi saya bisa mencoba untuk tetap terkini dengan rilis mendatang. Semoga ini bisa membantu ~~

Saya menghadapi masalah yang sama dengan Anda. Berdasarkan petunjuk @thuliha, kode berikut telah memecahkan masalah saya.

Di dalam htmlfile, ubah sebagai contoh berikut:

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

Di carousel.css, ubah kelas:

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

Coba ini

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

Apakah gambar Anda memiliki lebar 460px persis seperti span6? Dalam kasus saya, dengan ukuran gambar yang berbeda, saya meletakkan atribut height pada gambar saya untuk memastikan semuanya memiliki tinggi yang sama dan carousel tidak mengubah ukuran antar gambar.

Dalam kasus Anda, coba setel tinggi sehingga rasio antara tinggi ini dan lebar div bagian dalam korsel sama dengan rasio aspek gambar Anda

Solusi @Art L. Richards tidak berhasil. sekarang di bootstrap.css, kode originalnya menjadi seperti ini.

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

Kode @ rnaka530 akan merusak fitur fluid dari bootstrap.

Saya tidak memiliki solusi yang baik tetapi saya berhasil memperbaikinya. Saya mengamati contoh carousel bootstrap dengan sangat hati-hati http://twitter.github.com/bootstrap/javascript.html#carousel .

Saya menemukan bahwa lebar img harus lebih besar dari lebar kisi. Dalam span9, lebarnya hingga 870px, jadi Anda harus menyiapkan gambar yang lebih besar dari 870px. Jika Anda memiliki lebih banyak kontainer di luar img, karena semua kontainer memiliki batas atau margin sesuatu, Anda dapat menggunakan gambar dengan lebar lebih kecil.

Untuk carousel, saya yakin semua gambar harus memiliki tinggi dan lebar yang sama persis.

Juga, ketika Anda merujuk kembali ke halaman perancah dari bootstrap, saya cukup yakin bahwa span16 = 940px. Dengan pemikiran ini, saya pikir kita dapat berasumsi bahwa jika Anda memiliki file

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

Jadi ya, Anda harus berhati-hati saat mengatur spasi bentang dalam satu baris karena jika lebar gambar terlalu besar, div Anda akan dikirim ke "baris" berikutnya dan itu tidak menyenangkan: P

Tautan 1

Masukkan ini pada kelas div induk css tempat carousel Anda berada.

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