Bootstrap ảnh Responsive sai lầm trên IE

Question

tôi đã phát triển trang web của tôi sử dụng Bootstrap và về cơ bản, tôi có cấu trúc này ..

<div class="container"> 
    <img src="~/Content/Theme/img/image.png" class="img-responsive" style="margin: 0 auto;" /> 
</div> 

Nó hoạt động hoàn hảo trên Chrome và Firefox nhưng khi tôi thử nghiệm nó trên trình duyệt Internet Explorer 9 , hình ảnh trở nên mở rộng, thậm chí vượt ra ngoài kích thước hình ảnh. khi tôi sử dụng chế độ gỡ lỗi trên IE (F12) và bỏ cài đặt width:100%; dưới .img-responsive, nó trở lại bình thường.

Tôi nên giải quyết vấn đề này bằng cách nào? Tôi đã thử một vài giải pháp trên đây bao gồm thêm .col-sm-12 vào hình ảnh, nhưng nó vẫn không sửa nó trên IE.

Answer 1

Thêm này để ghi đè stylesheet của bạn:

.img-responsive {width: auto;} 

đó, kết hợp với max-width tuyên bố trong Bootstrap, nên giải quyết vấn đề. Cũng lưu ý rằng Bootstrap v3.2.1 đã hoàn nguyên cam kết gây ra vấn đề.

Github discussion for bug #13996

Answer 2

Hey tôi biết đó là một câu hỏi cũ nhưng trong trường hợp ai đó đang vẫn đang tìm kiếm câu trả lời ở vấn đề này chỉ cần thêm lớp "btn-block" để html của bạn.

<img src="your-image-path" class="img-responsive btn-block>

Hy vọng nó sẽ giúp.

Answer 3

.img-responsive{ 
width:100% 
max-width:100% 
} 

làm việc cho tôi

Answer 4

Dưới đây là một sửa chữa thú vị tôi đã đưa ra. Sau khi thêm 100% chiều rộng vào các lớp img-responsive và img-thumbnail, bạn sẽ thấy các hình ảnh nhỏ hơn bị thổi bay theo tỷ lệ, vì vậy tôi đã đưa ra một chút jQuery để đảm bảo rằng chiều rộng tối đa của mỗi hình ảnh không vượt quá chiều rộng tự nhiên. Hãy chắc chắn rằng nó trên cửa sổ tải và không trên tài liệu đã sẵn sàng để nó không chạy cho đến khi hình ảnh được tải.

$(window).on('load', function(){ 
 
\t $('.img-responsive, .img-thumbnail').each(function() { 
 
\t \t // get the natural width of the image: 
 
\t \t var imgWidth = $(this).prop('naturalWidth'); 
 
\t \t // set the max-width css rule of each image to it's natural width: 
 
\t \t $(this).css('max-width', imgWidth); 
 
\t }); 
 
});