私は完全に応答するカルーセル（ブートストラップ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

1つのオプションは、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