ズーム画面が

Question

ブートストラップ大きいとき、私はそう下記のVisual Studio 2010を使用してasp.netでのブートストラップ3.3.7を使用して画像のスライダーを作成しようとしていますが、私のコードです：

.ImageSlide { 
 
    width: 100%; 
 
    height: 350px; 
 
    max-height: 350px; 
 
}

<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> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active "> 
 
     <img class="ImageSlide" src="../Images/Image (1).jpg" alt="Image 2" /> 
 
     <div class="carousel-caption"> 
 
     <h3> 
 
      Image 1</h3> 
 
     <p> 
 
      This is the first image.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item "> 
 
     <img class="ImageSlide" src="../Images/Image (2).jpg" alt="Image 2" /> 
 
     <div class="carousel-caption"> 
 
     <h3> 
 
      Image 2</h3> 
 
     <p> 
 
      This is the second image.</p> 
 
     </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>

今、私は穴divに表示されるクラス項目の各divに画像を作ろうとしています。そして、画面が大きく、正確に何が行われたかのように画像を拡大する場合は、here（「全幅」の青色のボタンをクリックし、意味を理解するためにブラウザのサイズを変更してください）。クラスImageSlideは、穴の項目に画像を表示していて、望みどおりに高さを固定しています。しかし、この場合、画面が大きすぎると画像が伸びます。どのようにしてそれを拡大して穴の項目に同時に表示させることができますか？

Answer 1

あなたはbackground-size : coverでbackground-imageを使用することができます。https://jsfiddle.net/3nb5d13u/3/ここ

は私が変わっものです：

CSS：

.ImageSlide1 
{ 
    background-image : url('yourbackground.jpg'); 
    background-size : cover; 
    background-position: center; 
} 

HTML：

<div class="item active "> 
    <div class="ImageSlide1" ></div> 
    <div class="carousel-caption"> 
     <h3>Image 1</h3> 
     <p>This is the first image.</p> 
    </div> 
</div>