Bootstrap Image Sensible foiré sur IE

J'avais été le développement de mon site web à l'aide de Bootstrap et, en gros, j'ai cette structure..

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

Il fonctionne parfaitement sur Chrome et Firefox, mais quand je l'ai tester sur Internet Explorer 9, l'image est élargie, au-delà même de la taille de l'image elle-même. lorsque j'ai utilisé le mode de débogage sur IE (F12) et décocher la width:100%; sous .img-responsive, il revient à la normale.

Comment dois-je résoudre ce problème? J'ai déjà essayé un peu de solution sur ici, y compris l'ajout de .col-sm-12 à l'image, mais il n'est toujours pas résolu sur IE.

J'ai temporairement résolu par l'application d'un "hack", j'ai enlevé "width:100%" de .img-responsive dans le bootstrap.le css, mais je ne pense pas que ce soit une bonne solution. Quelqu'un a une meilleure solution? IE sérieusement sucer..
C'est un bug, ils sont de fixation dans la prochaine version: github.com/twbs/bootstrap/issues/13996
ajouter ceci dans votre css après le bootstrap. .img-responsive {width: auto}
Aussi, vous devez ajouter width: 100% à partir de là où vous l'avez supprimé, il est nécessaire de s'assurer vos images responsives de remplissage du conteneur. Puis ajouter @Christina suggestion.
ce 100%\9 n'est pas censé être dans le img-responsive classe c'est pour couvrir l'utilisation de l'informatique sur les images svg, mais il se comporte mal avec IE, il a été supprimé en 3.2.1. Ne le mettez pas en arrière.

OriginalL'auteur InnovativeDan | 2014-10-22

9

L'ajouter à vos remplacements de la feuille de style:
```
.img-responsive {width: auto;}
```
Qui, en conjonction avec le max-width déclaration dans le Bootstrap, devrait résoudre le problème. Notez également que Bootstrap v3.2.1 revenue sur le commit qui a provoqué le problème.

Github discussion pour le bug n ° 13996

OriginalL'auteur isherwood
2
```
.img-responsive{
 width:100%
 max-width:100%
}
```
a fonctionné pour moi

Bienvenue sur StackOverflow! Veuillez envisager d'ajouter une petite explication de votre code. Je vous remercie.
Ce serait forcer les images pour étirer au-delà de leur taille d'origine, qui n'est souvent pas souhaitable.
Cela a fonctionné pour moi. Merci

OriginalL'auteur mitra

Pour 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>

OriginalL'auteur SiD quakers

0

Remplaçant simplement img-responsive avec img-fluid a fonctionné pour moi en utilisant Bootstrap 3.3.7.

IE - Grrr.

OriginalL'auteur Umber Ferrule

Vous devez vous connecter pour publier un commentaire.