Bootstrap Atlı Karınca resmi düzgün hizalanmıyor

Lütfen aşağıdaki resme bir göz atın, resimleri döndürmek için bootstrap carousel kullanıyoruz. Ancak, pencere genişliği büyük olduğunda, görüntü kenarlıkla düzgün şekilde hizalanmaz.

Ancak bootstrap tarafından sağlanan atlıkarınca örneği, pencerenin genişliği ne olursa olsun her zaman iyi çalışır. Kodun ardından.

Birisi atlı karıncanın neden farklı davrandığını açıklayabilir mi? Bunun Görüntü boyutuyla bir ilgisi var mı veya bazı önyükleme yapılandırması eksik mi?

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

Çözüm, bu CSS kodunu özel CSS dosyanıza yerleştirmektir:

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

Bootstrap 3 ile, duyarlı ve merkez sınıfları ekleyin:

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

Bu otomatik olarak görüntüyü yeniden boyutlandırır ve resmi ortalar.

Düzenle:

Bootstrap 4 ile img-fluidsınıfı ekleyin

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

Aynı problemle karşılaştım ve şu şekilde çözdüm: Resim olmayan içeriği Carousel'e eklemek mümkün, böylece onu kullanabiliriz. Önce div.inner-item(ortaya hizalayacağınız yere) eklemeli, ardından bu div içine resim eklemelisiniz.

İşte kodum (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>

Ve css kodum (.scss):

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

İken vekozlov 'ın cevabı imajınızı ortalamak için Bootstrap 3 çalışacak atlıkarınca küçültülmüş olduğunda bile kıracak: Dönen resim ile küçültme yerine boyutunu korur.

Bunun yerine, bunu en üst düzey karuselde yapın div:

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

Bu, tüm atlı karıncayı ortalayacak ve resimlerinizin genişliğini aşmasını engelleyecektir (yani 900 piksel veya onu ayarlamak istediğiniz herhangi bir şey). Ancak, karuselin ölçeği küçültüldüğünde, görüntüler bununla birlikte küçültülür.

Bu stil bilgilerini elbette CSS / LESS dosyanıza koymalısınız.

Bootstrap 4'te etiketinize mx-autosınıf ekleyebilirsiniz img.

Örneğin, resminizin genişliği% 75 ise, şöyle görünmelidir:

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

Bootstrap otomatik olarak şu dile çevrilir mx-auto:

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

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

Stillerinizle bir ilgisi olabilir. Benim durumumda, üst "öğe" div içinde bir bağlantı kullanıyorum, bu nedenle şunu söylemek için stil sayfamı değiştirmem gerekti:

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

önceden var olan boostrap kodu altında:

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

ve resmim şöyle görünüyor:

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

Sanırım bir çözümüm var:

Kişisel stil sayfası sayfanızda, resim boyutlarınıza uyacak şekilde genişlik ve yüksekliği atayın .

Bu üst div'de, alanı genişliklerle tahsis eden ayrı bir "sınıf" oluşturun ... (Aşağıda gösterilmektedir)

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

Bootstrap.css'ye dokunmadan, kendi stil sayfanızda, orijinal pikinizin genişliğine ve yüksekliğine uyması için "carousel" (veya seçtiğiniz herhangi bir etiket) adını verin!

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

}

Bu yüzden benim durumumda, atlıkarınca için küçük 320x200 resimler kullanıyorum. Bootstrap.css dosyasında muhtemelen önceden ayarlanmış boyutlar vardır, ancak bunu değiştirmeyi sevmiyorum, böylece gelecekteki sürümlerle güncel kalmaya çalışabilirim. Umarım bu yardımcı olur ~~

Seninle aynı problemle karşı karşıyayım. @Thuliha'nın ipucuna dayanarak, aşağıdaki kodlar sorunlarımı çözdü.

Olarak htmldosya, aşağıdaki örnek değiştirin:

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

İçinde, carousel.csssınıfı değiştirin:

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

Bunu dene

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

Resimleriniz span6 ile tam olarak 460 piksel genişliğe sahip mi? Benim durumumda, farklı resim boyutlarında, resimlerimin hepsinin aynı yükseklikte olduğundan ve atlı karıncanın resimler arasında yeniden boyutlandırılmadığından emin olmak için resimlerime bir yükseklik özelliği koyuyorum.

Sizin durumunuzda, bu yükseklik ile atlıkarınca-iç div'inizin genişliği arasındaki oranın resimlerinizin en boy oranıyla aynı olması için bir yükseklik ayarlamayı deneyin.

@Art L. Richards'ın çözümü işe yaramadı. şimdi bootstrap.css'de, orijinal kod şu hale geldi.

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

@ rnaka530'un kodu, bootstrap'in akıcı özelliğini bozabilir.

İyi bir çözümüm yok ama düzelttim. Bootstrap'in atlıkarınca örneğini çok dikkatli bir şekilde inceledim http://twitter.github.com/bootstrap/javascript.html#carousel .

İmg genişliğinin ızgara genişliğinden daha büyük olması gerektiğini öğrendim. İçinde span9genişlik 870 piksele kadardır, bu nedenle 870 pikselden daha büyük bir görüntü hazırlamanız gerekir. İmg dışında daha fazla konteyneriniz varsa, tüm konteyner bir şeye sahip olduğundan, daha küçük genişliğe sahip resmi kullanabilirsiniz.

Atlıkarınca için, tüm resimlerin tamamen aynı yükseklik ve genişlikte olması gerektiğine inanıyorum.

Ayrıca, bootstrap'tan yapı iskelesi sayfasına geri döndüğünüzde, span16 = 940px olduğundan oldukça eminim. Bunu aklımızda tutarak, eğer sahipseniz,

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

Yani evet, bir satırdaki yayılma alanını ayarlarken dikkatli olmalısınız çünkü resim genişliği büyükse, div'inizi bir sonraki "satıra" gönderecektir ve bu hiç eğlenceli değil: P

Bağlantı 1

Bunu, atlı karıncanızın olduğu css üst div sınıfına ekleyin.

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