Ответ 1

Все, что вам нужно, это width:100% где-то, что относится к тегу, как показано в различных ответах здесь.

Использование col-xs-12:

<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />

Или встроенный CSS:

<img class='img-responsive' style='width:100%;' />

Или в вашем собственном файле CSS добавьте дополнительное определение для .img-отзыв

.img-responsive { 
    width:100%;
}

КОРТ ПРОБЛЕМЫ

Это известная ошибка FF, которая <fieldset> не соблюдает правила переполнения:

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

"Исправить" CSS, чтобы исправить ошибку FireFox, было бы сделать <fieldset> display:table-column. Однако, сделав это, в соответствии со следующей ссылкой, приведет к сбою отображения файла fieldset в Opera:

https://github.com/TryGhost/Ghost/issues/789

Итак, просто установите свой тег на 100% ширину, как описано в одном из вышеперечисленных решений.

Ответ 2

Это выглядит как проблема Bootstrap...

В настоящее время обходной путь: добавьте .col-xs-12 к вашему отзывчивому изображению.

Bootply

Ответ 3

Измените .img-отзыв внутри bootstrap.css на следующее:

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

По какой-то причине добавление ширины: 100% к миксу делает работу с img-отзывчивой.

Ответ 4

в FF используется встроенный стиль i.e.

<img src="..." class="img-responsive" style="width:100%; height:auto;" />

Это скалы:)

Ответ 5

В моем случае я только хотел, чтобы изображение реагировало в мобильном масштабе поэтому я создал css-стиль .myimgrsfix, который запускается только в мобильной шкале

.myimgrsfix {
    @media(max-width:767px){
        width:100%;
    }
}

и применил это к изображению <img class='img-responsive myimgrsfix' src='whatever.gif'>

Ответ 6

Кажется, это ошибка браузера.

10690: Сообщается об ошибке в Firefox для чувствительных изображений (с максимальной шириной: 100%) в ячейках таблицы. Никакие другие браузеры не затронуты. См

https://bugzilla.mozilla.org/show_bug.cgi?id=975632.

Источник

.img-responsive в <fieldset> имеют одинаковое поведение.

Ответ 7

Измените класс img, реагирующий на:

.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;

Ответ 8

просто добавьте .col-xs-12 к вашему отзывчивому изображению. Он должен работать.

Ответ 9

Как и ответ, данный Абдулом.

<fieldset>
   <legend>Image</legend>
   <img src="..." class="img-responsive" width="100%" />
</fieldset>

Он работает правильно в FF 29, Opera 12.17, Chromium 34 и в IE9. Да, это странный набор браузеров!

Ответ 10

Я создал этот script для решения проблемы класса img-responsive bootstrap3, и в моем случае это было решено!

$(document).ready(function() {

    if ($.browser.msie) {

        var pic_real_width, pic_real_height;

        var images = $(".img-responsive");

        images.each(function(){

            var img = $(this);
            $("<img/>")
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;  

                pic_stretch_width = $(img).width();  

                if(pic_stretch_width > pic_real_width)
                {
                    $(img).width(pic_real_width);
                }
            });         
        });
    }

});

Ответ 11

Для моей проблемы я не хотел, чтобы мои изображения масштабировались до 100%, когда они не были предназначены для того, чтобы они были размером с контейнер.

В моем контейнере xs (< 768px as.container), не имея фиксированной ширины, проблема была решена, поэтому я снова включил ее (за исключением заполнения 15px col.).

// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container'  )

function setWidth() {
    width_val = $( window ).width();
    if( width_val < 768 ) {
        $( '.container' ).width( width_val - 30 );
    } else {
        $( '.container' ).removeAttr( 'style' );
    }
}

setWidth();
$( window ).resize( setWidth );

Ответ 12

добавить условие только firefox в ваш пользовательский файл css.

/* only Firefox */
@-moz-document url-prefix() {
   .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      width: 100%;
   }
}