bootstrap Karussell Problem mit Höhe und Kontrollen

Question

Ich habe ein Problem mit meinem Bootstrap Karussell wie es geht so lange das Bild ist lang, sowie das Karussell steuert seine kommenden Karussell, wo es hässlich erscheinen. Ich habe eine Bildschirmaufzeichnung gemacht, die es einfacher macht, genau zu verstehen, wie das Problem aussieht.

Ich möchte, wenn Sie beobachten kann es mehr wird erklären, waren das, was ich suche https://www.youtube.com/watch?v=_9C8elqAscg

.carousel{margin-top: 20px;}.carousel .item img{margin: 0 auto; /* Align slide image horizontally center */}.bs-example{margin: 20px;} 

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" role="listbox"> 
    <!-- Carousel indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
    </ol> 
    <!-- Wrapper for carousel items --> 
    <div class="carousel-inner" class="myrdbtns"> 
     <div class="item active"> 
      <asp:Image ID="image" runat="server" alt="First Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img1") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide2" runat="server" alt="Second Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img2") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide3" runat="server" alt="Third Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img3") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide4" runat="server" alt="fourth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img4") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide5" runat="server" alt="fifth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img5") %>'></asp:Image> 
     </div> 
    </div> 
    <!-- Carousel controls --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" > 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 
</div> 

Answer 1

So gibt ein paar verschiedene Möglichkeiten, Sie machen das Bild passen in das Karussell gehen . Zuerst können Sie den Karussellgegenstand auf eine bestimmte Höhe einstellen. Stellen Sie das Bild dann auf eine Höhe und Breite von 100% ein. Es gibt ein Problem damit, dass die Bilder verzerrt werden können und von Ihrem Video sehe ich, dass das eine Bild viel größer ist als die anderen, so dass dieses Bild irgendwie albern aussehen kann, wenn Sie diesen Weg gehen. Hier ist ein Beispiel, wie Sie die Bildhöhe einstellen können.

Oder Sie können jedes der Elemente festlegen, um ein Hintergrundbild zu haben und dann das Hintergrundbild zu decken. Dies kann etwas von dem sehr hohen Bild abschneiden, aber zumindest erscheint das Bild nicht pixelig. Hier ist ein Beispiel dafür.

#myCarousel .item{ 
    height: 300px; 
    background-position: center !Important; 
    background-size: cover !Important; 
} 

Dann gilt für jedes Element wird Ihre html wie so aussehen:

<div class="item" style="background: url('http://placehold.it/1080x720');"> 
    //your item content here 
</div> 

Was die Karussells steuert sie absolut im Karussell angeordnet sind, so dass Sie sie, indem Sie die linke steuern kann, rechts, oben und Unterseite jeder Kontrolle in etwa so:

.carousel-control{ 
    top: 40px; 
    bottom: 20px; 
} 
.carousel-control.left{ 
    left: 20px; 
} 
.carousel-control.right{ 
    right: 20px; 
} 

ich eine Demo von etwas festgelegt haben, dass ich Sie denken, suchen hier JSFiddle Bootstrap Carousel

In dieser Demo habe ich die .item so eingestellt, dass sie einen Füllboden von einem Prozentsatz hat. Dadurch reagiert das Karussell, aber Sie können auch festlegen, dass das Element eine Höhe hat. Dann gab ich die <p> Markierung in jedem Einzelteil, um eine spezifizierte Höhe und eine Linie Höhe zu haben und stellte die Karussellkontrollen ein, darunter zu erscheinen. Wenn Sie Probleme mit dem Text haben, der zu lang ist, können Sie entweder dieses <p>-Tag verwenden, um eine höhere Höhe zu haben, oder Textüberlauf verwenden: elipsis oder etwas zu dieser Natur. Auf jeden Fall ist es vielleicht nicht genau das, wonach Sie suchen, aber es wird Sie zumindest in die richtige Richtung bringen.

Ich hoffe, es hilft.