我有这个图像标签。图像大小在 IE 和 Chrome/Mozilla 中有所不同。它在 Chrome/Mozilla 中运行良好,但我看到 IE 中的图像大小几乎增加了 1000%。
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15" width="15" />
我哪里错了?
我有这个图像标签。图像大小在 IE 和 Chrome/Mozilla 中有所不同。它在 Chrome/Mozilla 中运行良好,但我看到 IE 中的图像大小几乎增加了 1000%。
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15" width="15" />
我哪里错了?
这是为了标准化跨浏览器的图像查看(直接来自 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。这个尺寸的图像没什么大不了的,但请记住它。
在所有浏览器中使图像大小相同非常简单
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 所以这就是为什么我将身体作为 % 而图像也作为 %。
添加“px”可能会解决您的问题。
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />