Bootstrap Obraz Responsive zawiedli na IE

miałem rozwija moją stronę internetową za pomocą bootstrap i Zasadniczo mam tej struktury ..Bootstrap Obraz Responsive zawiedli na IE

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

To działa doskonale na Chrome i Firefox, ale kiedy go przetestować na Internet Explorer 9 , obraz staje się powiększony, nawet poza samym rozmiarem obrazu. kiedy użyłem trybu debugowania na IE (F12) i odznaczam ustawienie width:100%; pod .img-responsive, to wraca do normy.

Jak mam rozwiązać ten problem? Wypróbowałem już tutaj kilka rozwiązań, w tym dodałem do obrazu .col-sm-12, ale nadal nie można go naprawić w IE.

Źródło

2014-10-22 InnovativeDan

ja go tymczasowo rozwiązany poprzez zastosowanie „hack”, usunąłem „width: 100%” z .img reagujący w bootstrap.css, ale nie sądzę, że jest to dobre rozwiązanie. Ktoś ma lepsze rozwiązanie? IE poważnie suck .. – InnovativeDan

To błąd, naprawiają w następnej wersji: https://github.com/twbs/bootstrap/issues/13996 – Christina

dodać to do swojego css po bootstrap. .img-responsive {width: auto} – Christina

Dodaj to do swojej zadajnikami stylów:

.img-responsive {width: auto;}

To, w połączeniu z oświadczeniem w Bootstrap max-width powinno rozwiązać problem. Zauważ również, że Bootstrap v3.2.1 cofnął zatwierdzenie, które spowodowało problem.

Github discussion for bug #13996

Źródło

2014-12-17 21:53:48 isherwood

Hej wiem, że to stare pytanie, ale w przypadku gdy ktoś jest wciąż szuka odpowiedzi na ten problem wystarczy dodać klasę „BTN bloku” do html.

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

nadzieję, że to pomoże.

Źródło

2016-04-25 14:33:33 Peter

Mimo że działa, klasa btn-block ma być używana tylko na przyciskach. Myślę, że byłoby mylące przypisanie tej klasy do obrazu. –

Dobra szybka poprawka - jeśli używasz domyślnych nazw klas początkowych w swojej witrynie (zamiast klas semantycznych i miksów), nie sądzę, żebyś naprawdę musiał się martwić o słabą semantykę tego – JKirchartz

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

pracował dla mnie

Źródło

2016-05-02 15:08:38 mitra

Witamy w StackOverflow!Proszę rozważyć dodanie trochę wyjaśnienia do swojego kodu. Dziękuję Ci. – Aurasphere

To zmusiłoby obrazy do rozciągnięcia poza ich macierzysty rozmiar, co często nie jest pożądane. – isherwood

Oto interesujące fix wymyśliłem. Po dodaniu 100% szerokości do klas img-responsive i img-thumbnail zobaczysz, że mniejsze obrazy są nieproporcjonalne, więc wymyśliłem trochę tego jQuery, aby upewnić się, że maksymalna szerokość każdego obrazu nie przekracza naturalnej szerokości. Upewnij się, że jest załadowany przez okno, a NIE na gotowy dokument, więc nie działa, dopóki obrazy nie zostaną załadowane.

$(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 }); 
 
});

Źródło

2017-07-13 15:49:47 zel777

Bootstrap Obraz Responsive zawiedli na IE

Odpowiedz

Powiązane problemy