放大圖像時屏幕越大引導

我試圖讓使用與asp.net引導3.3.7使用所以下面Visual Studio 2010中的圖像滑塊是我的代碼：放大圖像時屏幕越大引導

.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類的項目中顯示圖像以顯示在洞洞中。我想在屏幕很大的時候像放大圖像那樣放大圖像here（請點擊「全寬」藍色按鈕並更改瀏覽器大小以瞭解我的意思）。 Image ImageSlide類在孔項目中顯示圖像，並正確地固定高度。但在這種情況下，當屏幕太大時圖像被拉伸。我怎樣才能讓它放大並同時顯示在洞項中？

來源

2017-04-26 H.Al

你可以使用'background-image'和'background-size：cover'，這裏有一個小例子https://jsfiddle.net/3nb5d13u/3/0 –

謝謝你sir @PascalGoldbach –

不客氣，如果我的評論幫助你，我也將它作爲答案發布 –

你可以使用background-image與background-size : cover：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>

來源

2017-04-26 13:53:52

放大圖像時屏幕越大引導

回答

相關問題