Làm thế nào tôi có thể thiết lập chiều cao cho hình thu nhỏ của Twitter bootstrap?

Question

Tôi đang gặp sự cố khi thiết lập mô-đun Hình thu nhỏ cho trang web cá nhân của mình. Tôi sử dụng twitter bootstrap (3.0) cho dự án của mình và tôi không thể hoàn thành việc thiết lập mô-đun Hình thu nhỏ.

Chiều rộng là ổn, nhưng tôi không thể đặt chiều cao của hình thu nhỏ (tôi không thể căn chỉnh tất cả hình thu nhỏ có cùng chiều cao).

Làm cách nào tôi có thể đặt chiều cao (chuẩn) cho tất cả hình thu nhỏ và hình ảnh thu phóng/tỷ lệ thành tâm để chúng có thể lấp đầy không gian mà không kéo dài hình ảnh?

<div class="row"> 
<!-- Thumbnail 0 --> 
<div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="img.png" alt="..."> 
    </a> 
    <div class="caption"> 
     <h4>Arctic MX-2, 8g</h4> 
    </div> 
</div><!-- /thumbnail 0 --> 
<!-- Thumbnail 1 --> 
<div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="blue.png" alt="..."> 
    </a> 
    <div class="caption"> 
     <h4>Arctic MX-2, 8g</h4> 
    </div> 
</div><!-- /thumbnail 1 --> 
</div><!-- /thumbnail --> 

Answer 1

hoặc trong css:

.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire 

hoặc inline:

<img src="img.png" alt="..." style="min-height:50px;height:50px;" /> 

Answer 2

Với SCSS, bạn có thể chỉ đơn giản là:

@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }} 
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }} 
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }} 

Answer 3

Hey Tôi đã nhìn vào câu hỏi của bạn , vì tôi đã có sa tôi vấn đề trong Bootstrap nơi nếu một trong những chiều cao của <div> cao hơn của người khác, sau đó lưới điện không hiển thị đúng. Tôi đã tìm ra cách khắc phục vấn đề liên kết hình thu nhỏ và tôi nghĩ nhiều người có thể đang sử dụng thuộc tính CSS Flex.

Trong div class="row" Tôi đã thêm style="display:flex; flex-wrap: wrap;". Về cơ bản, mã của tôi trông giống như sau:

<div class="row" style="display:flex; flex-wrap: wrap;"> 
    <div class="col-sm-3"> 
    <div class="thumbnail"> 
     <img src="http://lorempixel.com/500/300" style="width:200px"> 
     <div class="caption"> 
     <h4>Some thumbnail heading</h4> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3"> 
    <div class="thumbnail"> 
     <img src="http://lorempixel.com/500/300" style="width:200px"> 
     <div class="caption"> 
     <h4>Some thumbnail heading</h4> 
     </div> 
    </div> 
    </div> 
    .. any number of thumbnails you want 
</div> 

Vì vậy, bạn có thể có chiều cao hình thu nhỏ khác nhau và hiển thị chính xác, có thể không phải là jQuery Masonry, nhưng ít nhất tốt hơn.