Bootstrap Karussell mit fester Höhe: Bild in der Mitte horizontal oder vertikal basierend auf Bildmaße

Question

Ich habe ein Bootstrap Karussell mit einer festen Höhe. Hier ist die CSS:

.carousel-custom .carousel-outer { 
    position: relative; 
} 


@media(min-width: 992px){ 
    .carousel-custom { 
     margin-top: 20px; 

    .carousel-inner { 
     height: auto; 
    .item { 
     height:500px; 
     line-height:300px; 
     } 
    } 
    } 
} 

@media(max-width: 991px){ 
.carousel-custom { 
     margin-top: 20px; 

    .carousel-inner { 
     height: auto; 
    .item { 
     height:300px; 
     line-height:300px; 
     text-align:center; 

     } 
    } 
    } 
} 

Und hier ist mein Markup:

<div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel"> 
     <div class="carousel-outer"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd"> 
       <div class="carousel-caption"></div> 
      </div> 
      <div class="item"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p"> 
       <div class="carousel-caption"></div> 
      </div> 
      <div class="item"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932"> 
       <div class="carousel-caption"></div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 

     <!-- Indicators --> 
     <ol class="carousel-indicators mCustomScrollbar"> 
      <li data-target="#carousel-custom-1188" data-slide-to="0" class="active"> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd"> 
      </li> 
      <li data-target="#carousel-custom-1188" data-slide-to="1" class=""> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p"> 
      </li> 
      <li data-target="#carousel-custom-1188" data-slide-to="2" class=""> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932"> 
      </li> 
     </ol> 
     </div> 
    </div> 

Das Problem ist, dass ich Bilder, die sehr breit sind, andere sehr schmal und hoch, und andere mit einer guten Ration Höhe/Breite im selben Karussell.

Ich möchte die Wide Bilder vertikal zentriert (mit einer Breite von 100%), hohe Bilder horizontal (mit einer Höhe von 100%) und "normale" Bilder (mit einem angemessenen Verhältnis Höhe/Breite) Füllen Sie das ganze Karussell.

Hier ist, was ich versuche zu tun (erstes Bild ist ein Beispiel mit einem sehr breiten Bild, zweites Bild mit einem sehr hohen, und das letzte Bild hat ein "anständiges" Verhältnis).

Wie kann ich das erreichen? Ich habe versucht Make Bootstrap's Carousel both center AND responsive? und andere Tricks auf Google gefunden, aber niemand hat dies getan.

Answer 1

Da die .item Elemente relativ zueinander positioniert sind, können Sie die img Elemente absolut positionieren. Geben Sie den .item Elementen eine feste Höhe und helfen Sie dabei, die Bilder vertikal und horizontal auszurichten.

Ich bin sicher, es gibt viele verschiedene Möglichkeiten, dies zu tun, hier ist ein Beispiel. Ich hoffe es hilft.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
.carousel-inner > .item { 
 
    height: 100vh; 
 
} 
 

 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    max-height: 800px; 
 
    width: auto; 
 
} 
 

 
.carousel-control.left, 
 
.carousel-control.right { 
 
    background-image: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- inner --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/1200x600/2c3e50/000" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x1200/d35400/000" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x600/c0392b/000" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <!-- controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    
 
    </div> 
 

 
</div>

Answer 2

In Ordnung, ich habe jetzt schon eine Weile herumgetüftelt. Endet mit dem Ergebnis unten. Hoffe es hilft und beantwortet Ihre Frage (zumindest für einen kleinen Teil).

<head> 
    <title>Bootstrap Carousel</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
    html, 
    body { 
     height: 100%; 
    } 

    .carousel, 
    .item, 
    .active { 
     height: 100%; 
    } 

    .carousel-inner { 
     height: 100%; 
    } 

    /* Background images are set within the HTML using inline CSS, not here */ 

    .fill { 
     width: 100%; 
     height: 100%; 
     background-position: center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     -o-background-size: cover; 
    } 

    footer { 
     margin: 50px 0; 
    } 

    .tester { 
     height: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div class="tester"> 
    <!-- Full Page Image Background Carousel Header --> 
    <header id="myCarousel" class="carousel slide"> 
     <!-- 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> 
     </ol> 
     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </header> 
    <script> 
    $('.carousel').carousel({ 
     interval: 5000 //changes the speed 
    }) 
    </script> 
    </div> 
</body> 

Nochmals, hoffe es hilft!

Answer 3

Wenn Sie versuchen, dies in Bootstrap-Karussell zu erreichen, werden Sie mit schwarzen Balken oben und unten, am Ende ... Ich war mit ähnlichem Problem stecken und landete mit „flickity“ js library..it viel besser funktioniert als tryig dies nicht für das bedeutet, auf etwas zu erreichen ....

Answer 4

einfach Bild auf absolutes verwenden, wenn die Schieberhöhe fixiert ist

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="middle"> 
     <img src="http://placehold.it/1920x500"> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="middle"> 
     <img src="http://placehold.it/1920x300"> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="middle"> 
     <img src="http://placehold.it/600x900"> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

css

.carousel { 
    width: 500px; /*test width*/ 
    height: 300px; /*what ever height */ 
} 

.middle { 
    position: relative; 
    height: 300px; /*what ever height */ 
} 

.middle img { 
    max-width: 100%; 
    max-height: 100%; /*what ever height */ 
    margin: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

fiddle