wake-up-neo.net

Bootstrap Image Responsive vermasselt IE

Ich hatte meine Website mit Bootstrap entwickelt und im Grunde habe ich diese Struktur.

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

Es funktioniert perfekt mit Chrome und Firefox, aber wenn ich es mit Internet Explorer 9 teste, wird das Bild vergrößert, sogar über die Bildgröße hinaus. Wenn ich den Debug-Modus für IE (F12) verwendet habe und die Einstellung width:100%; unter .img-responsive aufhebt, wird der Normalwert wiederhergestellt.

Wie soll ich das lösen? Ich habe bereits ein paar Lösungen ausprobiert, einschließlich des Hinzufügens von .col-sm-12 zum Abbild, aber das Problem wird im IE nicht behoben.

13
InnovativeDan

Fügen Sie dies Ihrem überschriebenen Stylesheet hinzu:

.img-responsive {width: auto;}

Dies sollte in Verbindung mit der max-width-Anweisung in Bootstrap das Problem lösen. Beachten Sie auch, dass Bootstrap v3.2.1 das Commit zurücksetzte, das das Problem verursacht hat. 

Github Diskussion für Fehler # 13996

9
isherwood

Hey, ich weiß, es ist eine alte Frage, aber falls noch jemand nach Antworten zu diesem Problem sucht, fügen Sie einfach die Klasse "Btn-Block" zu Ihrer HTML hinzu.

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

Ich hoffe es hilft.

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

arbeitete für mich 

2
mitra

Für 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

Hier ist eine interessante Lösung, die ich mir ausgedacht habe. Nachdem Sie Ihren img-responsiven und img-thumbnail-Klassen 100% Breite hinzugefügt haben, werden Sie feststellen, dass kleinere Bilder überproportional gesprengt werden. Daher habe ich mir dieses kleine bisschen jQuery ausgedacht, um die maximale Breite jedes Bildes sicherzustellen überschreitet nicht die natürliche Breite. Stellen Sie sicher, dass das Fenster geladen ist und NICHT im Dokument bereit ist, damit es erst ausgeführt wird, wenn die Bilder geladen werden.

$(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

Das einfache Ersetzen von img-responsive Durch img-fluid Funktionierte für mich mit Bootstrap 3.3.7.

IE - Grrr.

0
Umber Ferrule