すべてのブラウザの画像自動幅CSSですか？

Question

ように私は、いくつかのCSSで定義された私のimgタグを持っている：それはデスクトップ上にちょうど私が試してみましたモバイルブラウザの一部で罰金だけでなく、Google Chromeの作品

img 
{ 
    width: auto !important; 
    height: auto !important; 
    max-width: 100%; 
} 

。しかし、IEやFireFoxでは動作しないようです。これで、ウィンドウのサイズを変更するときに意味します。私が取り組んでいるサンドボックスサイト：http://terraninstitute.comを見てください。私は意図的に巨大な絵になるように設定されたホームページのイメージを持っています。また、情報（メインメニュー）、新人（サイドメニュー）に移動し、地図画像を下部に表示します。私のドロイド（といくつかの他のデバイス私は私の手を得ることができます）だけでなく、Google Chromeでこれはかなり良いようです。 IEとFireFoxでは、それほど多くはありません。

何か不足していますか？競合するスタイル定義ですか？私はまだそれが見つかっていない。

TIA

Answer 1

あなたは不必要に自分の文書にあなたのイメージの幅を複数回宣言するとmaxを宣言しています-widthは間違った方法です。 の最大幅：100％との幅：100％を組み合わせて宣言すると、Max-widthは画像（最大600ピクセル）の最大サイズ/境界を定義することになっています。宣言はイメージがそのまま100％展開されるためです。

次の行にあなたのCSSから幅の宣言を削除します。

ライン116：すべて一緒img宣言を削除し、それが必要とされていません。

ライン365：それらが必要されていないようmax-width:100%とheight:auto;属性を削除（し、その別の場所で宣言することができるよう、あなたがすべて一緒に宣言を削除することができた場合）

ライン121：今、ちょうどこの1つだけに固執し、次を追加してください：

img { 
    height: auto; 
    width:100%; 
} 

Answer 2

あなたのCSSは、よりspeficicください!important

を使用しないでください：

body img { 
    width: auto; 
    height: auto; 
    max-width: 100%; 
} 

Answer 3

in style.cssライン116,212およびinuit.cssライン365。すべて削除してください。

img{ 
    height: auto; 
    max-width: 100%; 
} 

あなたが必要とするのはそれだけです。応答性のイメージのため

Answer 4

Bootstrapソリューション：

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 

    /* Part 1: Set a maxium relative to the parent */ 
    max-width: 100%; 

    /* IE7-8 need help adjusting responsive images */ 
    width: auto\9; 

    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    height: auto; 

    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}