Gambar Bootstrap Carousel tidak sejajar dengan benar


93

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>

gambar carousel


Apakah semua gambar Anda memiliki lebar yang sama? Juga, apakah mereka meregang ke .span6wadahnya?
Andres Ilich

1
semua gambar saya memiliki lebar dan tinggi yang sama. Semuanya tampak meregang. Untuk mencoba memperbaiki, saya mencoba membuat gambar dengan ukuran yang sama seperti yang diberikan oleh contoh bootstrap. Tapi, itu benar-benar mengacaukan ukurannya. Jadi, menurut saya ada hubungan antara ukuran gambar dan gaya css. Namun, dokumentasi tersebut tidak menggambarkan hubungan tersebut sepenuhnya.
Nambi

Saya mengalami masalah ini juga, dan itu cukup membuat frustrasi. Bagi saya, hal itu ternyata terjadi karena div yang berisi carousel memiliki lebar tetap yang lebih lebar dari carousel.
WuTheFWasThat

Mungkin menyembunyikan alamat email adalah ide yang bagus :)
tgdn

Jawaban:


160

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

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

1
ini berhasil untuk saya! Saya sudah mencoba metode vekozlov tetapi tidak berhasil, ini berhasil! terima kasih banyak
ah-shiang han

The tinggi dari carousel perubahan untuk ketinggian yang berbeda dari gambar, sehingga Anda akan perlu untuk menentukan lebar tetap di css.
QuantumHive

Super! Mudah-mudahan ini hanya akan menjadi kelas BS 'built-in' seperti .carousel-img-center atau yang lainnya segera.
CodeFinity

Saya akan mencoba margin tetapi saya menemukan menambahkan height:noneuntuk .carousel-inner > .item > imgmendapatkan hasil yang lebih baik daripada defaultheight:500px
CrandellWS

Anda harus melakukannya .carousel-inner > .carousel-item > img { margin: 0 auto; }untuk Bootstrap 4.
Expenzor

125

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

9
Mencoba solusi yang dipilih teratas tidak berhasil. Ini jauh lebih bersih, sederhana, dan berhasil. Terima kasih!
Kyle

2
Ramping dan bersih. Terima kasih
chiefenne

2
Sempurna, terima kasih. Saya bersumpah saya mencari di Google ini sebelumnya dan tidak mendapat jawaban, ini langsung berfungsi.
Chud37

Saya menggunakan bootstrap 4 dan kelas img-fluid tidak memusatkan gambar. Mereka semua dibenarkan.
Malchesador

2
@iaacp tambahkan saja text-centerke <div class="carousel-item">tag awal
deanwilliammills

18

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

css ini bekerja dengan sangat baik untuk saya, selain untuk memperbaiki ketinggian gambar di carousel
SporkInventor

6

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.


3

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

1

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>

1

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


1

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

1

Coba ini

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

Selamat datang di StackOverflow! Jawaban Anda bisa sangat bermanfaat jika Anda menjelaskan sedikit bagaimana ini menjawab pertanyaan. Jawaban kode-saja tidak diterima dengan baik di SO.
René Vogt

0

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


itu tidak membantu. Apakah menurut Anda format gambar itu penting? Contoh bootstrap menggunakan file JPEG, di mana saya menggunakan file PNG. Apakah itu ada bedanya.
Nambi

0

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.


0

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


0

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];
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.