Giostra di bootstrap con altezza fissa: immagine centrale in orizzontale o verticale in base alle dimensioni dell'immagine

Question

Ho una giostra di bootstrap con altezza fissa. Ecco il 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; 

     } 
    } 
    } 
} 

Ed ecco la mia marcatura:

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

Il problema è che ho immagini che sono molto ampia, altri molto strette e alte, e gli altri con una buona altezza razione/larghezza nello stesso carosello.

Mi piacerebbe avere le immagini grandi centrate verticalmente (con una larghezza del 100%), immagini alte centrate orizzontalmente (con un'altezza del 100%) e immagini "normali" (con un rapporto decente altezza/larghezza) riempiendo tutta la giostra.

Ecco cosa sto cercando di fare (la prima immagine è un esempio con un'immagine molto ampia, una seconda immagine con una molto alta e l'ultima ha un rapporto "decente").

Come avrei potuto raggiungere questo obiettivo? Ho provato Make Bootstrap's Carousel both center AND responsive? e altri trucchi trovati su Google, ma nessuno ha fatto questo.

Answer 1

Poiché gli elementi .item sono posizionati relativi, è possibile posizionare gli elementi img in modo assoluto. Assegnando agli elementi .item un'altezza fissa, sarà possibile allineare verticalmente e orizzontalmente le immagini all'interno.

Sono sicuro che ci sono molti modi per farlo, ecco un esempio. Spero che sia d'aiuto.

@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

Va bene, sono in giro da un po 'ora. Finito con il risultato qui sotto. Spero che aiuti e risponda alla tua domanda (almeno per una piccola parte).

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

Ancora una volta, spero che sia d'aiuto!

Answer 3

Se si tenta di raggiungere questo obiettivo in carosello bootstrap, si finirà con barre nere in alto e in basso ... sono rimasto bloccato con il problema simile e finito per usare "flickity" js library..it funziona molto meglio di tryig per raggiungere questo obiettivo su qualcosa non significava per questo ....

Answer 4

usare basta immagine sul assoluto se la tua altezza cursore è fisso

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

vedere fiddle