Question

我有这个图片标签。图像大小因IE和Chrome / Mozilla而异。它在Chrome / Mozilla中运行良好，但我看到IE中图像大小增加了近1000％。

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

我哪里出错了？

Answer 1

这是为了规范浏览器（directly from 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。这个尺寸的图片并不是什么大不了的事，但请记住这一点。

Answer 2

在所有浏览器中使图像的大小相同非常简单

的 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，所以这就是为什么我把身体作为％，图像也作为％。

Answer 3

添加＆＃34; px＆＃34;可能会解决你的问题。

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

Img在IE和Chrome / Mozilla中的大小不同

3 个答案: