web-dev-qa-db-fra.com

Bootstrap Image Responsive foiré sur IE

J'avais développé mon site web en utilisant Bootstrap et, fondamentalement, j'ai cette structure ..

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

Cela fonctionne parfaitement sur Chrome et Firefox, mais lorsque je le teste sur Internet Explorer 9, l'image s'agrandit, même au-delà de la taille de l'image elle-même. Lorsque j’utilisais le mode débogage sur IE (F12) et que je décochais le paramètre width:100%; sous .img-responsive, la situation redevenait normale.

Comment dois-je résoudre ce problème? J'ai déjà essayé quelques solutions ici, notamment l'ajout de .col-sm-12 à l'image, mais cela ne résout toujours pas le problème sous IE.

htmlcsstwitter-bootstrapinternet-explorerresponsive-design
13
InnovativeDan

Ajoutez ceci à votre feuille de style de remplacement:

.img-responsive {width: auto;}

Cela, en conjonction avec l'instruction max-width dans Bootstrap, devrait résoudre le problème. Notez également que Bootstrap v3.2.1 a annulé la validation à l'origine du problème. 

Discussion Github du bogue n ° 13996

9
isherwood

Hé, je sais que c’est une vieille question mais si quelqu'un cherche toujours des réponses à ce problème, ajoutez simplement la classe "btn-block" à votre code HTML.

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

J'espère que ça va aider.

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

a travaillé pour moi 

2
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>
0
SiD quakers

Voici une solution intéressante que je suis venu avec. Après avoir ajouté 100% de largeur à vos classes img-responsive et img-thumbnail, vous constaterez que les images plus petites sont gonflées de manière démesurée. J'ai donc conçu ce petit morceau de jQuery pour vérifier que la largeur maximale de chaque image ne dépasse pas la largeur naturelle. Assurez-vous que la fenêtre est chargée et non le document prêt afin qu'il ne s'exécute pas tant que les images ne sont pas chargées.

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

0
zel777