Karuzela programu Bootstrap o stałej wysokości: obraz centrum w poziomie lub w pionie w zależności od wymiarów obrazu

Question

Mam karuzelę bootstrap o stałej wysokości. Oto 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; 

     } 
    } 
    } 
} 

I tu jest mój znaczników:

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

Problem jest, że mam zdjęcia, które są bardzo szerokie, inne bardzo wąskie i wysokie, a innym z dobrej wysokości racja/szerokość w tej samej karuzeli.

Chciałbym mieć szerokie obrazy wyśrodkowane w pionie (o szerokości 100%), wysokie obrazy wyśrodkowane w poziomie (o wysokości 100%) i "normalne" obrazy (przy przyzwoitej proporcji wysokość/szerokość) wypełniając całą karuzelę.

Oto, co próbuję zrobić (pierwszy obraz jest przykładem z bardzo szerokim obrazem, drugi obraz z bardzo wysokim, a ostatni ma "przyzwoity" stosunek).

Jak można to osiągnąć? Wypróbowałem Make Bootstrap's Carousel both center AND responsive? i inne sztuczki znalezione w Google, ale nie zrobiłem tego.

Answer 1

Ponieważ elementy .item są względnie ustawione, można po prostu ustawić elementy img absolutnie. Nadanie elementom .item stałej wysokości pomoże w wyrównaniu obrazów w pionie i poziomie.

Jestem pewien, że istnieje wiele różnych sposobów, aby to zrobić, oto jeden przykład. Mam nadzieję, że to pomoże.

@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

W porządku, od jakiegoś czasu błądzę. Zakończył się wynikiem poniżej. Mam nadzieję, że to pomaga i odpowiada na twoje pytanie (przynajmniej na małą część).

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

Jeszcze raz, mam nadzieję, że pomoże!

Answer 3

Jeśli próbujesz osiągnąć w bootstrap karuzeli, będzie w końcu z czarnymi pasami na górze i na dole ... utknąłem z podobnym problemem i skończyło się „flickity” js library..it działa dużo lepiej niż tryig to osiągnąć na czymś nie oznaczało dla tego ....

Answer 4

prostu użyć obrazu na wysokość bezwzględna, czy suwak jest stała

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

zobaczyć fiddle