web-dev-qa-db-fra.com

Bootstrap 3 images .img-responsive ne sont pas sensibles dans un jeu de champs dans FireFox

Dans Firefox (testé sur Win7 et Win8), avec le code ci-dessous - quand une image sensible est à l'intérieur d'un <fieldset> il n'est plus réactif. Cela signifie que lorsque ma fiche sera redimensionnée pour le téléphone, l'image ne sera pas réduite en conséquence.

Je peux facilement contourner le problème, je n'ai donc besoin d'aucune aide. Cependant, si vous connaissez un moyen de résoudre ce problème, ce serait grandement apprécié.

L'image sensible dans le code ci-dessous ne sera pas sensible à la taille du navigateur dans FireFox (au moins sur Win7 et Win8) à moins que vous ne supprimiez le fichier <fieldset> et <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>
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
43
Kevin Nelson

Tout ce dont tu as besoin c'est width:100% quelque part qui s’applique à la balise comme indiqué par les différentes réponses ici.

En utilisant col-xs-12:

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

Ou CSS en ligne:

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

Ou, dans votre propre fichier CSS, ajoutez une définition supplémentaire pour .img-responsive

.img-responsive { 
    width:100%;
}

LA RACINE DU PROBLÈME

C’est un bug connu de FF qui <fieldset> ne respecte pas les règles de débordement:

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

Un CSS "FIX" pour résoudre le bug de FireFox consisterait à rendre le <fieldset>display:table-column. Toutefois, selon le lien suivant, cela entraînera l'échec de l'affichage de l'ensembles de champs dans Opera:

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

Donc, il suffit de définir votre tag à 100% largeur comme décrit dans l’une des solutions ci-dessus.

45
Kevin Nelson

Cela ressemble à a Bootstrap issue ...

Actuellement, voici une solution de contournement: ajoutez .col-xs-12 à votre image sensible.

Bootply

51
zessx

Modifiez .img-responsive dans le fichier bootstrap.css comme suit:

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

Pour une raison quelconque, l'ajout de largeur: 100% du mélange rend le travail img-responsive.

11
Ryan Allen

Dans mon cas, je voulais seulement que l'image se comporte de manière réactive à l'échelle mobile. J'ai donc créé un fichier .ss de style css qui n'intervient qu'à l'échelle mobile.

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

et appliqué cela à l'image <img class='img-responsive myimgrsfix' src='whatever.gif'>

3
Dylan Hamilton-Foster

dans FF, utilisez le style inline i.e.

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

Ça déchire :)

2
Abdul Rahman

Cela semble être un bug du navigateur.

10690: Signaler un bogue dans Firefox pour les images réactives (celles dont la largeur maximale est de 100%) dans les cellules du tableau. Aucun autre navigateur n'est affecté. Voir

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

Source

.img-responsive dans <fieldset> ont le même comportement.

1
Foobar

ajoutez simplement .col-xs-12 à votre image réactive. Ça devrait marcher.

1
aquartier

Changez la classe img sensible à:

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

J'ai créé ce script pour résoudre le problème de la classe bootstrap3 img-responsive, et dans mon cas, cela est résolu!

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

});
0
Filipe - View Brasil

Semblable à la réponse donnée par Abdul.

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

Cela fonctionne correctement dans FF 29, Opera 12.17, Chromium 34 et dans IE9. Oui, c’est un ensemble de navigateurs étranges!

0
user1973469

ajoutez la condition uniquement firefox dans votre fichier css personnalisé.

/* 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

Pour mon problème, je ne voulais pas que mes images soient réduites à 100%, alors qu'elles n'étaient pas censées être aussi grandes que le conteneur.

Pour mon conteneur xs (<768px en tant que .container), le fait de ne pas avoir une largeur fixe a conduit le problème, donc je l'ai mis à nouveau dessus (moins le remplissage de 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 );
0
rambillo