Làm cách nào để biến tỷ lệ hình ảnh thành chiều cao đầy đủ trong Bootstrap - Carousel?

Question

Tôi đang cố hiển thị hình ảnh sẽ lấp đầy toàn bộ màn hình trong điều khiển Bootstrap Carousel. Tôi đang sử dụng hình ảnh có kích thước 1024px * 795px

Tôi đang sử dụng ví dụ được đưa ra trên trang web Bootstrap có hình ảnh có kích thước đầy đủ. Theo chiều ngang, nó lấp đầy màn hình rất tốt. Nhưng theo chiều dọc nó không mở rộng tốt. Tôi nên thêm/xóa thuộc tính nào để hình ảnh lấp đầy toàn bộ màn hình, mặc dù chúng có kích thước pixel nhỏ hơn?

Tôi cũng có thể làm điều đó trong thiết kế đáp ứng để hình ảnh có kích thước bất kỳ?

Tôi đang sử dụng css như trên trang web mẫu và chỉ thay đổi CSS trong carousel.html.

Answer 1

Tôi nhận ra câu trả lời này hơi muộn, nhưng tôi cũng phải đối mặt với một thử thách tương tự với băng chuyền Bootstrap. Để 100% chiều cao hoạt động, băng chuyền và bất kỳ vùng chứa nào của cha mẹ cũng phải có chiều cao 100%.

tôi đã thêm một số ghi đè các lớp Bootstrap CSS:

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.fill{width:100%;height:100%;background-position:center;background-size:cover;} 

Và sau đó thêm các lớp "lấp đầy" phù hợp để băng chuyền của bạn:

<div class="container fill"> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="fill" style="background-image:url('//placehold.it/1024x700');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    </div> 
    <div class="pull-center"> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
    </div> 
</div> 
</div> 

Dưới đây là một ví dụ làm việc: http://bootply.com/59900