Bootstrap Immagine Responsive incasinato su IE

Question

ero stato sviluppare il mio sito web utilizzando Bootstrap e in fondo, ho questa struttura ..

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

Funziona perfettamente su Chrome e Firefox, ma quando ho testarlo su Internet Explorer 9 , l'immagine viene ingrandita, anche oltre la dimensione dell'immagine stessa. quando ho usato la modalità di debug su IE (F12) e deselezionando l'impostazione width:100%; sotto .img-responsive, si ritorna alla normalità.

Come dovrei risolvere? Ho già provato alcune soluzioni qui incluso aggiungendo .col-sm-12 all'immagine, ma ancora non lo aggiusta su IE.

Answer 1

Aggiungi questo al vostro foglio di stile le sostituzioni:

.img-responsive {width: auto;} 

che, in concomitanza con l'max-width dichiarazione Bootstrap, dovrebbe risolvere il problema. Si noti inoltre che Bootstrap v3.2.1 ha ripristinato il commit che ha causato il problema.

Github discussion for bug #13996

Answer 2

Hey So che è una vecchia questione, ma nel caso in cui qualcuno è ancora alla ricerca di risposte a questo problema è sufficiente aggiungere la classe "btn-block" al tuo html.

<img src="your-image-path" class="img-responsive btn-block>

Spero che ti aiuto.

Answer 3

.img-responsive{ 
width:100% 
max-width:100% 
} 

ha lavorato per me

Answer 4

Ecco una correzione interessante mi è venuta. Dopo aver aggiunto il 100% di larghezza alle tue classi img-responsive e img-thumbnail, vedrai che le immagini più piccole si gonfiano a dismisura, così mi è venuta in mente questa piccola parte di jQuery per assicurarmi che la larghezza massima di ogni immagine non supera la larghezza naturale. Assicurati che sia caricato sulla finestra e NON sul documento pronto, in modo che non funzioni finché le immagini non vengono caricate.

$(window).on('load', function(){ 
 
\t $('.img-responsive, .img-thumbnail').each(function() { 
 
\t \t // get the natural width of the image: 
 
\t \t var imgWidth = $(this).prop('naturalWidth'); 
 
\t \t // set the max-width css rule of each image to it's natural width: 
 
\t \t $(this).css('max-width', imgWidth); 
 
\t }); 
 
});