我有这个图像标签。图像的大小在IE和Chrome/Mozilla中不同。它在Chrome/Mozilla中工作得很好,但我看到IE中的图像大小增加了几乎1000%。
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15" width="15" />
我哪里做错了?
czq61nw11#
这是为了规范化跨浏览器的图像查看(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。这个大小的图像不是一个大问题,但请记住它。
6bc51xsx2#
在所有浏览器中使图像大小相同非常简单
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)的高度和宽度是用百分比来表示的。比如有一个div的高度是100,而内部的span如果有50%,那么它将是50,所以这就是为什么我把body作为%,图像也作为%。
vjhs03f73#
添加“px”可能会解决您的问题。<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />
3条答案
按热度按时间czq61nw11#
这是为了规范化跨浏览器的图像查看(directly from normalize.css),以及在一个方向或另一个方向上正确缩放图像。
最后一行是修复IE缩放图像的问题。
将其放入CSS文件中。
对于内联CSS:
你不应该对一个比你想缩小的图像大的图像这样做。用户将下载完整的图像,然后调整它的大小,浪费带宽和CPU。这个大小的图像不是一个大问题,但请记住它。
6bc51xsx2#
在所有浏览器中使图像大小相同非常简单
CSS格式
HTML格式
这是因为外部标签(div,span,body any)的高度和宽度是用百分比来表示的。比如有一个div的高度是100,而内部的span如果有50%,那么它将是50,所以这就是为什么我把body作为%,图像也作为%。
vjhs03f73#
添加“px”可能会解决您的问题。
<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />