HTML img 扭曲直到我突出显示图像

Question

我在 <img> 标签中有一个徽标，并使用以下 css.

将其缩小

#logo{
        position: absolute;
        max-height:82px;
        top: 24px;
        left: 24px;
        height:auto;
        width:auto;
        display:block;
}

图片是这样加载的：

<img id="logo" src="~/Content/images/OriginalLogo.png" />

但是当页面加载时 Firefox 中发生了一些奇怪的事情。

图像看起来像这样扭曲：

然后当我在浏览器中突出显示图像时，失真消失了：

我试过关闭浏览器的硬件加速，但没有用。

我也使用了徽标 SVG，结果相同。

所以这一定是软件问题，有没有一种特定的方法可以将图像加载到 HTML 中，这样 Firefox 就不会这样做？显然这是不对的，因为如果所有图像都像这样扭曲，网站看起来会很糟糕。

注意：这只是标志图片的片段，我使用了windows截图工具，仅用于演示目的。

UPDATE1：当使用 SVG 文件时，即使我突出显示它，图像仍然失真。

UPDATE2: 当我在 I.E 中打开网站时，同样的事情发生了，但是有了他的 .png 标志，即使我突出显示它，它仍然保持扭曲。

UPDATE3：尝试在 3 台不同的机器上加载网页，但同样的问题仍然存在。

UPDATE4：将实际图像大小重新调整为所需的确切大小，并且失真消失了。然后尝试将图像从原始尺寸缩小到其尺寸的一半，同样的问题仍然存在。我不想创建相同图像但大小不同的多个文件。

Answer 1

您是否尝试过使用 moz 而不是标准 CSS 属性来调整图像大小。例如，按照您的建议将图像的宽度和高度调整为 50% ...

#logo .img {
/* For Firefox specifically */
-moz-transform: scale(0.5,0.5); 

/* For the other browsers */
-ms-transform: scale(0.5,0.5); 
-webkit-transform: scale(0.5,0.5); 
transform: scale(0.5,0.5);
}

我不确定它是否会对结果产生任何影响，但可能值得一试，看看浏览器对调整大小的解释是否不同。

HTML img 扭曲直到我突出显示图像

HTML img distorted until I highlight the image

html

css

firefox

image

internet-explorer-11