부트 스트랩 corousal 반응을 만드는 방법

Question

전폭과 높이의 부트 스트랩 corousal을 만들고 있습니다. 높이가 반응하지만 너비가 반응하지 않습니다. 즉, 이미지의 너비에 따라 이미지가 자르기 시작합니다. 뷰포트가 모바일 화면 크기로 왼쪽에 도달 corousal 작물, 다음은 부트 스트랩과 CSS 코드, 이미지의 폭이 반응하게 할 수있는 모든 사용자 도움말 괭이입니다 감사합니다

 <header id="myCarousel" class="carousel slide"> 
     <!-- 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> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal1.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 

      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal2.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal1jpg.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal4.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

     <div class="drbatras-logo"> 
      <img src="images/logo.png" alt="logo"/> 
     </div>  
    </header> 

CSS

html, 
    body { 
     height: 100%; 
    } 

    .carousel, 
    .item, 
    .active { 
     height: 100%; 
     position: relative; 
    } 

    .carousel-inner { 
     height: 100%; 
    } 
    /* Background images are set within the HTML using inline CSS, not here */ 

    .drbatras-logo{ 
     position: absolute; 
     top:60px; 
     right: 170px; 
    } 

    .fill { 
     width: 100%; 
     height: 100%; 
     background-position: center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     -o-background-size: cover; 
    } 

Answer 1

당신은 당신이

<div class="fill" id="fill"> </div> 

CSS를 사용할 수 있습니다 <img> 태그를 사용하고 class="img-responsive"

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345"> 

Answer 2

을 설정할 수 있습니다

#fill{ 
    background:url('images/corousal1.jpg') no-repeat center center; 
    background-size:100% auto; 
}