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

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。这个尺寸的图片没什么大不了的，但请记住。