Điều chỉnh và kích thước hình ảnh để vừa với div (bootstrap)

Tôi đang cố gắng có được một hình ảnh để vừa 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 đó nó bị thu nhỏ theo tỷ lệ với kích thước không đủ lớn. Tôi không chắc cách tốt nhất là làm cho hình ảnh phù hợp với bên trong nó là gì.

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

Đâ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 của tôi

.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;


}

Bạn có thể xác định rõ ràng widthvà heightcủa hình ảnh, nhưng kết quả có thể không đẹp nhất.

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

jsFiddle

... theo nhận xét của bạn, bạn cũng có thể chặn bất kỳ overflow- xem ví dụ này để xem hình ảnh bị giới hạn chiều cao và bị cắt vì quá rộng.

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

.top1 img {
    height:100%;
}

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>

CẬP NHẬT:

Trong Bootstrap 4 img-responsivetrở thành img-fluid, vì vậy giải pháp sử dụng Bootstrap 4 là:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

Lưu ý rằng Bootstrap 4 hiện sử dụng img-fluidthay vì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ố.

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

Tôi đã gặp vấn đề tương tự và tình cờ tìm ra 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>

Tôi đã sử dụng cái này và làm việc cho tôi.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

Nếu ai trong số các bạn đang tìm Bootstrap-4 . Nó đây

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

Hầu hết thời gian, dự án bootstrap 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 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ó phản hồi, hãy lặp lại các bước trên trong phần $(window).resize(func).