Điều chỉnh và kích thước hình ảnh để phù hợp với một div (bootstrap)

Question

Tôi đang cố gắng để có được một hình ảnh để phù hợp với một div kích thước cụ thể. Thật không may, hình ảnh không phù hợp với nó và thay vào đó tỷ lệ thu nhỏ lại thành một kích thước không đủ lớn. Tôi không chắc cách tốt nhất để đi về việc có được hình ảnh phù hợp với bên trong nó là gì.

Nếu điều này không đủ mã, tôi rất sẵn lòng cung cấp thêm và tôi mở để sửa bất kỳ lỗi nào khác mà tôi đang xem.

Dưới đây là HTML

<div class="span3 top1"> 
     <div class="row"> 
      <div class="span3 food1"> 
       <img src="images/food1.jpg" alt=""> 
      </div> 
     </div> 
      <div class="row"> 
       <div class="span3 name1"> 
        heres the name 
      </div> 
      </div> 
      <div class="row"> 
       <div class="span3 description1"> 
        heres where i describe and say "read more" 
      </div> 
      </div> 


     </div> 

CSS My

.top1{ 

    height:390px; 
    background-color:#FFFFFF; 
    margin-top:10px; 


} 

.food1{ 

background-color:#000000; 
height:230px; 


} 

.name1{ 

background-color:#555555; 
height:90px; 

} 

.description1{ 

background-color:#777777; 
height:70px; 


} 

Answer 1

Bạn có thể xác định một cách rõ ràng width và height các hình ảnh, nhưng kết quả có thể không phải là tìm kiếm tốt nhất.

.food1 img { 
    width:100%; 
    height: 230px; 
} 

jsFiddle

---

... mỗi bình luận của bạn, bạn cũng có thể chỉ chặn bất kỳ overflow - xem this example để xem một hình ảnh bị hạn chế bởi chiều cao và cắt đứt bởi vì nó quá rộng.

.top1 { 
    height:390px; 
    background-color:#FFFFFF; 
    margin-top:10px; 
    overflow: hidden; 
} 

.top1 img { 
    height:100%; 
} 

Answer 2

Hãy thử cách này:

<div class="container"><div class="col-md-4" style="padding-left: 0px; padding-right: 0px;"> 
     <img src="images/food1.jpg" class="img-responsive"> 
    </div> 
</div> 

Answer 3

Tôi có vấn đề này cùng và stumbled khi các giải pháp đơn giản sau đây. Chỉ cần thêm một chút đệm vào hình ảnh và nó tự thay đổi kích thước để vừa với div.

<div class="col-sm-3"> 
    <img src="xxx.png" class="img-responsive" style="padding-top: 5px"> 
</div> 

Answer 4

Chỉ cần thêm lớp img-responsive vào thẻ img của bạn, nó được áp dụng trong bootstrap 3 trở đi!

chúc may mắn :)

Answer 5

Hầu hết thời gian, bootstrap project sử dụng jQuery, vì vậy bạn có thể sử dụng jQuery.

Chỉ cần lấy chiều rộng và chiều cao của cha mẹ với JQuery.offsetHeight() và JQuery.offsetWidth() và đặt chúng thành phần tử con với JQuery.width() và JQuery.height().

Nếu bạn muốn làm cho nó đáp ứng, hãy lặp lại các bước trên trong $(window).resize(func), là tốt.

Answer 6

Chỉ cần đứng đầu là Bootstrap 4 now uses img-fluid instead of img-responsive, vì vậy hãy kiểm tra kỹ phiên bản bạn đang sử dụng nếu bạn gặp sự cố.