Bootstrap 3 .img-responsive images ne sont pas sensibles dans les champs dans FireFox

Dans Firefox (testé sur Win7 et Win8), avec le code ci-dessous – lorsqu’une image réactive est à l’intérieur d’un

elle n’est plus sensible. Cela signifie que lorsque mon formulaire est redimensionné pour le téléphone, l’image ne sera pas réduite en conséquence.

Je peux facilement contourner le problème, alors je n’ai pas besoin d’aide pour cela. Toutefois, si vous connaissez un moyen de résoudre ce problème, cela serait grandement apprécié.

L’image réactive dans le code ci-dessous ne répondra pas à la taille du navigateur dans FireFox (au moins sur Win7 et Win8) à moins que vous ne supprimiez les

et

.

      Fieldset Responsive Image Test     
I Am Legend img

Cela ressemble à un problème Bootstrap https://stackoverflow.com/questions/21943108/bootstrap-3-img-responsive-images-are-not-responsive-inside-fieldset-in-firefox/

Actuellement, voici une solution: ajoutez .col-xs-12 à votre image réactive.

Butin

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

En utilisant col-xs-12:

   

Ou CSS en ligne:

  

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

 .img-responsive { width:100%; } 

LA RACINE DU PROBLÈME

Il s’agit d’un bogue FF connu qui

ne respecte pas les règles de débordement:

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

Un CSS “FIX” pour corriger le bug de FireFox consisterait à display:table-column

display:table-column . Cependant, selon le lien suivant, cela entraînera l’échec de l’affichage du jeu de champs dans Opera:

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

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

Remplacez .img-responsive dans bootstrap.css par ce qui suit:

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

Pour une raison quelconque, append de la largeur: 100% au mixage rend le travail plus réactif.

Dans mon cas, je voulais seulement que l’image se comporte de manière réactive à l’échelle mobile, j’ai donc créé un style CSS .myimgrsfix qui ne se déclenche qu’à l’échelle mobile.

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

et appliqué cela à l’image

dans FF utiliser le style en ligne

  

Ca bas 🙂

Cela semble être un bug de navigateur.

10690: Rapporté un bogue dans Firefox pour les images réactives (celles avec max-width: 100%) dans les cellules de tableau. Aucun autre navigateur n’est affecté. Voir

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

La source

.img-responsive dans

a le même comportement.

Changer la classe img en réponse à:

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

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

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

 
Image

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

J’ai créé ce script pour résoudre le problème de la classe img-responsive bootstrap3, et dans mon cas, cela a été 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); $("") .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); } }); }); } }); 

Pour mon problème, je ne voulais pas que mes images soient mises à l’échelle à 100% lorsqu’elles n’étaient pas conçues pour être aussi grandes que le conteneur.

Pour mon conteneur xs (<768px en tant que .container), le fait de ne pas avoir une largeur fixe est à l'origine du problème, alors j'en ai mis une autre (moins la colonne 15px).

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

Ajouter condition seulement 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%; } }