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

Posted

技术标签:

【中文标题】IE 和 Chrome/Mozilla 中的 Img 大小不同【英文标题】:Img size different in IE and Chrome/Mozilla 【发布时间】:2013-11-15 22:02:09 【问题描述】:

我有这个图片标签。图像大小在 IE 和 Chrome/Mozilla 中有所不同。它在 Chrome/Mozilla 中运行良好,但我看到 IE 中的图像大小几乎增加了 1000%。

<img src="% static "/static/img/left_arrow.png" %"    />

我哪里出错了?

【问题讨论】:

你的 CSS 是什么样的,图片的尺寸是多少 图片尺寸为 256x256。我的 css 是内联的(我已经提供的那个)。 【参考方案1】:

添加“px”可能会解决您的问题。

&lt;img src="% static "/static/img/left_arrow.png" %" alt="prev" height="15px" width="15px" /&gt;

【讨论】:

【参考方案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" %"  class="imageclass"/>

这是因为带有百分比的高度和宽度是针对外部标签(div、span、body any)执行的。就像有一个高度为 100 的 div 比里面的跨度如果有 50% 比它将是 50 所以这就是为什么我将身体作为 % 并且图像也作为 %。

【讨论】:

【参考方案3】:

这是为了规范跨浏览器 (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" %"    />

您不应该对大于您想要缩小到的图像执行此操作。用户将下载完整的图像,然后调整它的大小,为他们浪费带宽和 CPU。这个尺寸的图片没什么大不了的,但请记住它。

【讨论】:

以上是关于IE 和 Chrome/Mozilla 中的 Img 大小不同的主要内容,如果未能解决你的问题,请参考以下文章

使用 Jquery 在 IE 8 和 7 中“权限被拒绝”

锚元素在 Firefox 和 chrome 中不起作用

Vimeo - 嵌入在 IE 中不起作用

当ajax目标是localhost时,IE 10和11中的访问被拒绝

Angular 表单在 Internet Explorer 11 中不起作用

浏览器useragent