Загрузочный образ

Я разрабатывал свой сайт с помощью Bootstrap и в основном, у меня есть эта структура.

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

Он отлично работает на Chrome и Firefox, но когда я тестирую его в Internet Explorer 9, изображение становится увеличенным, даже за пределами самого размера изображения. когда я использовал режим отладки в IE (F12) и отключил параметр width:100%; в .img-responsive, он возвращается в нормальное состояние.

Как мне это разрешить? Я уже пробовал несколько решений здесь, включая добавление .col-sm-12 к изображению, но он по-прежнему не исправляет его в IE.

Ответы

Ответ 1

Добавьте это в таблицу стилей переопределения:

.img-responsive {width: auto;}

Это, в связи с оператором max-width в Bootstrap, должно решить проблему. Также обратите внимание, что Bootstrap v3.2.1 вернул фиксацию, вызвавшую проблему.

Обсуждение Github для ошибки # 13996

Ответ 2

Эй, я знаю, это старый вопрос, но если кто-то все еще ищет ответы на эту проблему, просто добавьте класс "btn-block" в ваш html.

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

Ответ 3

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

работал у меня

Ответ 4

Вот интересное решение, с которым я столкнулся. После добавления 100% -ной ширины к вашим img-отзывчивым и img-thumbnail-классам вы увидите, что меньшие изображения выходят из-под контроля, поэтому я придумал этот немного jQuery, чтобы убедиться, что максимальная ширина каждого изображения не превышает естественную ширину. Убедитесь, что нагрузка на окно и NOT на документе готовы, чтобы он не запускался до загрузки изображений.

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

Ответ 5

Для Bootstrap 4

<div class="row>
   <div class="col-lg-3">
       <div class="p-4">
           <div style="width: auto; max-width: 100%; height: auto;">
               <img class="img-fluid" scr="/image.jpg">
           </div>
       </div>
   </div>
</div>

Ответ 6

Простая замена img-responsive на img-fluid работала для меня с помощью Bootstrap 3.3.7.

IE - Grrr.