3

この画像タグがあります。画像のサイズは、IE と Chrome/Mozilla で異なります。Chrome/Mozilla では問題なく動作しますが、IE では画像のサイズがほぼ 1000% 増加しています。

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15" width="15" />

どこが間違っているのですか？

4

3 に答える 3

0

すべてのブラウザで画像のサイズを同じにするのは本当に簡単です

CSS

body
    {
    height:100%;
    width:100%;
    }

.imageclass
           {
           height:15%; /* You can Change this according to you */
           width:15%; /* You can Change this according to you */
           }

HTML

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" class="imageclass"/>

これは、外側のタグ（div、span、body any）に対してパーセント付きの高さと幅が実行されるためです。同様に、内部のスパンよりも高さが 100 の div がある場合、50% よりも 50% がある場合、これがボディを % として、画像も % として取得した理由です。

于 2013-11-05T06:18:52.567 に答える
0

これは、ブラウザー全体で ( normalize.css から直接) 画像の表示を正規化し、一方の方向または他方の方向に移動するときに画像を正しくスケーリングするためです。

その最後の行は、画像のスケーリングに関する IE の問題を修正することです。

これを CSS ファイルに入れます。

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  height: auto;
  width: auto;
  width: auto\9;
}

インライン CSS の場合:

<img style="border: 0;-ms-interpolation-mode: bicubic;max-width: 100%;height: auto;width: auto;width: auto\9;" src="{% static "/static/img/left_arrow.png" %}" alt="prev" width="15" height="15" />

縮小したい画像よりも大きい画像でこれを行うべきではありません。ユーザーは完全なイメージをダウンロードしてからサイズを変更し、帯域幅と CPU を浪費します。このサイズの画像は大したことではありませんが、覚えておいてください。

于 2013-11-05T05:11:45.590 に答える
0

「px」を追加すると、問題が解決する場合があります。

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />

于 2016-01-05T08:27:02.513 に答える