Я не могу полностью реагировать на карусель (bootstrap v4-alpha)

Question

Я хочу сделать рабочий карусель на основе этого. http://v4-alpha.getbootstrap.com/examples/carousel/ Проблема в том, что когда я загружаю свои изображения в нее и изменяю ее размер до небольшого размера экрана, я получил под изображения часть старого держателя изображений, например, здесь. https://postimg.org/image/ocul5jt2t/ Все, что я хочу, это мои изображения, чтобы быть на месте и ничего больше. Может кто-нибудь, пожалуйста, помогите мне с этим?

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="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> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img src="background1.jpg" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption text-xs-left"> 
      <h1>Example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img src="background2.jpg" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img src="background3.jpg" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption text-xs-right"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div><!-- /.carousel --> 

Карусель HTML такая же, а также CSS для этого Я хочу, чтобы приспособить его к моему проекту, но, как я ранее упоминал, что я есть проблемы при изменении размеров его небольшого размера. Если вы заметите эту фотографию, у вас может быть хорошая идея о том, что с ней не так.

body { 
padding-bottom: 3rem; 
color: #5a5a5a; 
} 



.carousel { 
margin-bottom: 4rem; 
} 

.carousel-caption { 
    z-index: 10; 
} 

.carousel-item { 
height: 32rem; 
background-color: #777; 
} 
.carousel-item > img { 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
height: 32rem; 
} 

.carousel-indicators { 
top: 1.5rem; 
right: 1.5rem; 
bottom: auto; 
left: auto; 
width: 1rem; 
margin-left: 0; 
} 

.carousel-indicators > li { 
margin-bottom: .25rem; 
} 
@media (min-width: 40em) { 

.carousel-caption p { 
margin-bottom: 1.25rem; 
font-size: 1.25rem; 
line-height: 1.4; 
} 

.featurette-heading { 
font-size: 50px; 
} 
} 

@media (min-width: 62em) { 
.featurette-heading { 
margin-top: 7rem; 
} 
} 

Answer 1

Это в настоящее время известная проблема с BS 4 альфа: https://github.com/twbs/bootstrap/pull/18258

Один из вариантов, чтобы скрыть заголовок на более мелкие видовых, которые можно было бы сделать с помощью hidden-sm-down. Другим обходным решением, которое я нашел, является использование object-fit:cover на изображении, но это не поддерживается в старых браузерах.

.carousel-item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 32rem; 
    object-fit: cover; 
} 

http://www.codeply.com/go/EaMgFMhff2