Cách tạo một hình ảnh đáp ứng cũng tăng tỷ lệ trong Bootstrap 3

Tôi hiện đang sử dụng twitter bootstrap 3 và tôi đang gặp sự cố để tạo hình ảnh đáp ứng. Tôi đã sử dụng img-responsivelớp học. Nhưng kích thước hình ảnh không tăng lên. Nếu tôi sử dụng width:100%thay vì max-width:100%thì nó hoạt động hoàn hảo. Vấn đề ở đâu? Đây là mã của tôi:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Lớp hình ảnh đáp ứng của Bootstrap đặt max-widththành 100%. Điều này giới hạn kích thước của nó, nhưng không buộc nó phải căng ra để lấp đầy các phần tử mẹ lớn hơn chính hình ảnh. Bạn phải sử dụng widththuộc tính để buộc nâng cấp.

http://getbootstrap.com/css/#images-responsive

Chắc chắn mọi thứ!

.img-responsive là cách phù hợp để làm cho hình ảnh đáp ứng với bootstrap 3 Bạn có thể thêm một số quy tắc chiều cao cho hình ảnh bạn muốn tạo phản hồi, bởi vì với trách nhiệm, chiều rộng thay đổi cùng với chiều cao, hãy sửa nó và bạn sẽ có.

Không chắc liệu nó có còn giúp bạn không ... nhưng tôi đã phải làm một thủ thuật nhỏ để làm cho hình ảnh lớn hơn nhưng vẫn giữ cho nó phản hồi

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Hy vọng nó sẽ giúp PS Chiều rộng tối đa có thể là bất kỳ thứ gì bạn thích

Nếu đặt chiều rộng cố định trên hình ảnh không phải là một tùy chọn, thì đây là một giải pháp thay thế.

Có div cha với display: table & table-layout: fixed. Sau đó, thiết lập hình ảnh để hiển thị: table-cell và max-width thành 100%. Bằng cách đó, hình ảnh sẽ vừa với chiều rộng của hình ảnh gốc.

Thí dụ:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Fiddle: http://jsfiddle.net/5y62c4af/

Hãy thử những cách sau trong biểu định kiểu CSS của bạn:

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

Cố gắng làm như vậy:

1) Trong index.html của bạn

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) Theo phong cách của bạn. Css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Tôi thấy rằng bạn có thể đặt lớp .col trên hình ảnh sẽ thực hiện thủ thuật - tuy nhiên điều này mang lại cho nó thêm phần đệm cùng với bất kỳ thuộc tính nào khác được liên kết với lớp, chẳng hạn như float left, tuy nhiên chúng có thể bị hủy bằng cách nói ví dụ như không có đệm lớp như một bổ sung.

Tôi đoán hình ảnh bị hỏng hơn là bị hỏng. Ví dụ: kích thước hình ảnh là 195px X 146px.

Nó sẽ hoạt động bên trong độ phân giải thấp hơn như máy tính bảng. Khi bạn có độ phân giải 1280 X 800, nó sẽ buộc lớn hơn vì cũng có chiều rộng 100%. Có lẽ CSS bên trong truy vấn phương tiện như phông chữ biểu tượng là giải pháp tốt nhất.