chrome、safariでは画像の自動縮小が可能ですが、firefox、IE9_html/css_WEB-ITnoseでは自動縮小ができません

携帯電話でアクセスできる必要があるため、テスト中はブラウザ ウィンドウが最小限に縮小されました。
Safari では次のようになります。



Firefox では次のようになります。


写真もテキストは完全に表示されます。

html と css は次のとおりです:

<img class="img-responsive" width="250" src="img/sdlc.jpg" style="float:right;">

img-respinsive style:

display:block;max-width:100%;height:auto

解決方法

ディスカッションに返信 (解決策)

親コンテナ

親コンテナの幅を調整してみてください

幅は自動的に取得されるようですが、調整しても役に立ちません

または、HTML5 を試して、ブラウザの幅に応じて異なるスタイルを使用してください。 HTML5 をサポートします
次の応答と同様です

<style type="text/css">    content div {        border: 1px black solid;    }    @media screen and (max-width: 320px) {        #below320 {            background-color: red;        }    }    @media screen and (min-width: 320px) and (max-width: 800px) {        #between320to800 {            background-color: red;        }    }    @media screen and (min-width: 800px) and (max-width: 1280px) {        #between800to1280 {            background-color: red;        }    }    @media screen and (min-width: 1280px) {        #pass1280 {            background-color: red;        }    }</style>

max-width:100% を width: 100% に変更します

これらのブラウザは携帯電話では動作しません

width を削除するだけです

max-width:100 を変更します% 幅に変更: 100%

さて、これを試してみましたが、うまくいきませんでした

これらのブラウザは携帯電話では使用できません

今日はこの点を考慮する必要があります。テストでは、特に携帯電話で使用しました。 Firefox をダウンロードします。

幅を削除すると、画像は元のサイズで表示されます。

または、HTML5 を試してください。ブラウザの幅に応じてスタイルが異なります。ただし、ブラウザは HTML5 をサポートする必要があります。

以下のレスポンシブ レイアウトと同様です。私はフロントエンドに特化していません。もう一度言いますが、うまくいかない場合は、レイアウトとメソッドを変更してください。
width="250" を削除しましたか?

width="250" を削除しましたか?

削除すると機能しません; 絶対的か相対的かに関係なく、幅に関係するものはすべて試しましたが、機能しません

ブートストラップに関連している可能性がありますが、別の方法です

これは可能です。 。
うまくいかない場合は、他の影響が原因である可能性があります。

次に、さらにコードを確認する必要があります。

これは可能なはずです。

うまくいかない場合は、他の影響が原因である可能性があります。

次に、さらにコードを確認する必要があります。

ただし、Chrome、Safari、Opera、国内のブラウザでは問題ありませんが、Firefox と IE では問題があります。