Hình ảnh băng chuyền không lấp đầy chiều rộng trong bootstrap 3

Question

Tôi là người mới sử dụng công cụ đáp ứng này. Tôi đang cố gắng sử dụng băng chuyền từ bootstrap mới 3 và vì lý do nào đó, hình ảnh không lấp đầy chiều rộng của băng chuyền. Tất cả các hình ảnh có kích thước chính xác giống nhau (1000x395) và không có vấn đề gì tôi làm, nó không điền vào tất cả các cách. Bất kỳ và tất cả giúp đỡ được đánh giá rất nhiều !!! Dưới đây là đoạn code Tôi đang sử dụng và một ảnh chụp màn hình:

<div class="row"> 
    <div class="col-md-12"> 

     <div id="carousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
      <li data-target="#carousel" data-slide-to="3"></li> 
      <li data-target="#carousel" data-slide-to="4"></li> 
      <li data-target="#carousel" data-slide-to="5"></li> 
      <li data-target="#carousel" data-slide-to="6"></li> 
      <li data-target="#carousel" data-slide-to="7"></li> 
      <li data-target="#carousel" data-slide-to="8"></li> 
      <li data-target="#carousel" data-slide-to="9"></li> 
     </ol> 

     <div class="carousel-inner"> 

      <div class="item active"> 
      <img src="/images/temp/1.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/2.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/3.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/4.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/5.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/6.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/7.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/8.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/9.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/10.jpg" class="img-responsive"> 
      </div> 

     </div> 

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

    </div> <!-- /col-md-12 --> 
</div> <!-- /row --> 

Answer 1

.img-responsive thiết lập các hình ảnh để tối đa 100% của nó là kích thước ban đầu. class="col-md-12" của bạn là 1200 px trong lưới lớn. Bạn cần hình ảnh lớn hơn> = 1200px hoặc làm cho trang web của bạn nhỏ hơn.

Thêm truy vấn phương tiện bên dưới sau khi css Bootstrap sẽ đẩy chiều rộng tối đa của trang web của bạn lên 940px;

@media (min-width: 1200px) { 
    .container { 
    width: 940px; 
    } 

Answer 2

Thêm width="100%" với từng ngành nghề img: <img src="/images/temp/2.jpg" width="100%"> Nó sẽ làm tăng chiều cao tương ứng để duy trì tỷ lệ khía cạnh.