wake-up-neo.net

Bootstrap 3 .img-responsive Images reagieren nicht innerhalb des Fieldset in FireFox

In Firefox (getestet auf Win7 und Win8) mit dem folgenden Code: Wenn sich ein responsives Image in einem <fieldset> Befindet, reagiert es nicht mehr. Dies bedeutet, dass das Bild nicht entsprechend verkleinert wird, wenn sich die Größe meines Formulars für das Telefon ändert.

Ich kann das Problem leicht umgehen, daher brauche ich keine Hilfe. Wenn Sie jedoch wissen, wie Sie dieses Problem beheben können, sind Sie sehr dankbar.

Das Antwortbild im folgenden Code reagiert nicht auf die Browsergröße in FireFox (zumindest unter Win7 und Win8), es sei denn, Sie entfernen <fieldset> Und <legend>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fieldset Responsive Image Test</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id='content' class='container'>
    <div class='row'>
        <div class='col-xs-10 col-xs-offset-1'>
            <form>
                <fieldset>
                    <legend>I Am Legend</legend>
                        <img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
                </fieldset>
            </form>
        </div>
    </div>
</div>
</body>
</html>
43
Kevin Nelson

Alles was Sie brauchen ist width:100% irgendwo, was für das Tag gilt, wie in den verschiedenen Antworten hier gezeigt.

Col-xs-12 benutzen:

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

Oder Inline-CSS:

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

Oder fügen Sie in Ihrer eigenen CSS-Datei eine zusätzliche Definition für .img-responsive hinzu

.img-responsive { 
    width:100%;
}

DER WURZEL DES PROBLEMS

Dies ist ein bekannter FF-Fehler, der <fieldset> beachtet keine Überlaufregeln:

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

Ein CSS "FIX" zur Behebung des Firefox-Fehlers wäre, das <fieldset>display:table-column. Wenn Sie den folgenden Links folgen, schlägt die Anzeige des Fieldset in Opera jedoch fehl:

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

Stellen Sie Ihr Tag einfach auf 100% Breite ein, wie in einer der obigen Lösungen beschrieben.

45
Kevin Nelson

Das sieht aus wie ein Bootstrap Problem ...

Im Moment gibt es eine Problemumgehung: Fügen Sie .col-xs-12 Zu Ihrem reaktionsschnellen Bild hinzu.

Bootply

51
zessx

Ändern Sie .img-responsive in bootstrap.css wie folgt:

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

Aus irgendeinem Grund macht das Hinzufügen von Breite: 100% zum Mix das Arbeiten reaktionsschnell.

11
Ryan Allen

In meinem Fall wollte ich nur, dass das Bild im mobilen Maßstab reagiert. Daher habe ich einen CSS-Stil namens .myimgrsfix erstellt, der nur im mobilen Maßstab funktioniert

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

und das auf das Bild angewendet <img class='img-responsive myimgrsfix' src='whatever.gif'>

in FF Inline-Stil verwenden, d.h.

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

Es rockt :)

2
Abdul Rahman

Es scheint ein Browser-Bug zu sein.

10690: In Firefox wurde ein Fehler für reaktionsfähige Bilder (mit einer maximalen Breite von 100%) in Tabellenzellen gemeldet. Andere Browser sind nicht betroffen. Sehen

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

Quelle

.img-responsive im <fieldset> haben das gleiche Verhalten.

1
Foobar

fügen Sie einfach .col-xs-12 zu Ihrem reaktionsschnellen Bild hinzu. Es sollte funktionieren.

1
aquartier

Ändern Sie die img-Klasse als Reaktion auf:

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

Ich habe dieses Skript erstellt, um das Problem der Klasse img-responsive bootstrap3 zu lösen, und in meinem Fall ist dies behoben!

$(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);
                }
            });         
        });
    }

});

Ähnlich wie die Antwort von Abdul.

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

Es funktioniert einwandfrei in FF 29, Opera 12.17, Chromium 34 und in IE9. Ja, es ist eine seltsame Reihe von Browsern!

0
user1973469

füge bedingung nur firefox in deine benutzerdefinierte css datei ein.

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

Bei meiner Ausgabe wollte ich nicht, dass meine Bilder zu 100% skaliert werden, wenn sie nicht so groß sein sollten wie der Container.

Für meinen xs-Container (<768px als .container) führte das Fehlen einer festen Breite zum Problem, daher habe ich einen wieder darauf gesetzt (abzüglich der 15px-Spaltenauffüllung).

// 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 );
0
rambillo