Jak zrobić obraz do pełnej wysokości w Bootstrap - Karuzela?

Question

Próbuję pokazać obraz, który powinien wypełnić cały ekran w kontrolce Bootstrap Carousel. Używam obrazu o rozdzielczości 1024px * 795px

Korzystam z przykładu podanego na stronie Bootstrap z obrazem w pełnym rozmiarze. W poziomie bardzo dobrze wypełnia ekran. Ale pionowo nie skaluje się dobrze. Jakie właściwości powinienem dodać/usunąć, aby obrazy wypełniały cały ekran, chociaż mają mniejsze rozmiary pikseli?

W jaki sposób mogę to zrobić w projektach responsywnych, aby obrazy miały dowolny rozmiar?

Używam css tak jak jest na przykładowej stronie i tylko zmienia CSS w karuzeli.html.

Answer 1

Zdaję sobie sprawę, że ta odpowiedź jest trochę spóźniona, ale stanąłem również przed podobnym wyzwaniem z karuzelą Bootstrap. Aby wysokość 100% działała, karuzela i każdy z jej "kontenerów nadrzędnych musi również mieć wysokość 100%.

dodałem kilka przesłonięcia do klas Bootstrap CSS:

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.fill{width:100%;height:100%;background-position:center;background-size:cover;} 

a następnie dodać klasę "wypełnić" odpowiednio do karuzeli:

<div class="container fill"> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="fill" style="background-image:url('//placehold.it/1024x700');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    </div> 
    <div class="pull-center"> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
    </div> 
</div> 
</div> 

Oto przykład roboczych: http://bootply.com/59900