Làm cách nào để chia tỷ lệ hình ảnh cho vừa với vùng chứa?

Question

Tôi có một danh sách hình ảnh, tôi muốn hình ảnh được chia thành các thùng chứa có cùng kích thước. như thế này:

Tôi tạo ra một jsfiddle

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png"> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
       <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" > 
      </a> 
     </div> 
    </div> 
</div> 

Làm thế nào tôi có thể làm điều đó? Và trong ví dụ của tôi, tôi đã xác định chiều cao: 100px ;, điều này dẫn đến không phản hồi, nếu tôi đổi kích thước trình duyệt, chiều cao của div vẫn không thay đổi. Nếu có thể, tôi muốn danh sách hình ảnh này đáp ứng.

Answer 1

Thay đổi height và width thành max-height và max-width. Hình ảnh sẽ không lớn hơn bất kỳ hình ảnh nào khác.

.thumbnail img { 
    max-height: 100%; 
    max-width: 100%; 
} 

Updated Fiddle

Answer 2

Điều này sẽ giúp, ít nhất là ví dụ của bạn. Có thể có một số trường hợp trong đó điều này sẽ không hoạt động. Trong trường hợp đó bạn phải tìm một giải pháp js.

.thumbnail img { 
    height: 100%; 
    width: auto; 
} 

Answer 3

.thumbnail { 
    height: 100px; 
    display: table; 
} 

.thumbnail img { 
    height: 100%; 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 4

.thumbnail img { 
height: 100%; 
    width: 100%; 
} 

Sử dụng này.

Answer 5

.thumbnail { 
     height: 100%; 
    } 

    .thumbnail img { 
     max-height: 100%; 
     max-width: 100%; 
     border: 1px solid red; 
    } 

Answer 6

(Tôi sẽ thêm một câu trả lời mặc dù đây là một câu hỏi cũ. Tôi đã cùng một vấn đề cho đến khi tôi thêm lớp thumbnail để liên kết hình ảnh và nhìn một chút sâu hơn. Không có thêm css là cần thiết.)

Có thể có điều gì đó đã thay đổi. Trong Bootstrap 3.3.7. có này (css không được rút gọn, dòng 5019):

.thumbnail > img, 
.thumbnail a > img { 
    margin-left: auto; 
    margin-right: auto; 
} 

Và đây (css phi minified, dòng 1124):

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Vì vậy, tất cả mọi thứ nên làm việc ngay ra khỏi hộp nếu bạn đã thêm lớp thumbnail vào liên kết hình ảnh. (Bạn cần phải loại bỏ tất cả những người và mọi thứ sẽ phá vỡ.) Và nó hoạt động có hoặc không có css thêm:

.thumbnail img { 
    max-height: 100%; 
    max-width: 100%; 
} 

Các css thêm đè bootstraps phong cách, ít nhất là đối với tôi kể từ khi phong cách thêm được bao gồm sau Bootstraps phong cách riêng. (Nhưng nó là dư thừa.)

Answer 7

Năm 2017, bạn có thể sử dụng flex. Thêm vào đó bạn sẽ nhận được những hình ảnh làm trung tâm trong các thùng chứa thumbnail: updated fiddle

.thumbnail { 
    height: 300px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    border: solid 1px blue; 
} 

.thumbnail img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: 0 auto; 
    border: solid 1px red; 
}