web-dev-qa-db-ja.com

Bootstrap画像レスポンシブがめちゃくちゃになるIE

私はBootstrap=を使用して自分のWebサイトを開発しており、基本的にこの構造を持っています。

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

ChromeおよびFirefoxで完全に機能しますが、Internet Explorer 9でテストすると、画像サイズ自体を超えて、画像が拡大されます。IE（F12）とwidth:100%;の下の.img-responsive設定のチェックを外すと、通常に戻ります。

どうすれば解決できますか？画像に.col-sm-12を追加するなど、すでにいくつかの解決策を試しましたが、IEではまだ解決されていません。

htmlcsstwitter-bootstrapinternet-explorerresponsive-design
15
InnovativeDan

これをオーバーライドスタイルシートに追加します。

.img-responsive {width: auto;}

これは、Bootstrapのmax-widthステートメントと組み合わせて、問題を解決する必要があります。 Bootstrap v3.2.1は、問題の原因となったコミットを元に戻しました。

バグ＃13996のGithubディスカッション

9
isherwood

ちょっと古い質問であることはわかっていますが、誰かがこの問題の答えをまだ探している場合は、HTMLに「btn-block」クラスを追加してください。

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

お役に立てれば幸いです。

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

私のために働いた

2
mitra

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

ここに私が思いついた興味深い修正があります。 imgレスポンシブクラスとimg-thumbnailクラスに100％の幅を追加すると、小さい画像の比率が失われることがわかるので、この小さなjQueryを思いついて、各画像の最大幅を確認しました自然な幅を超えません。画像が読み込まれるまで実行されないように、ドキュメントの準備ではなくウィンドウの読み込み時に確認してください。

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

単にimg-responsiveとimg-fluidは、Bootstrap 3.3.7。

IE-Grrr。

0
Umber Ferrule