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 不这样做？显然这是不对的，因为如果所有图像都像这样扭曲，网站会看起来很糟糕。

注意：这只是logo图片的sn-p，我使用的是windows截图工具，仅供演示。

UPDATE1：使用SVG 文件时，即使我将其突出显示，图像仍会失真。

UPDATE2：当我在 I.E 中打开网站时，会发生同样的事情，但使用他 .pnglogo，即使我突出显示它，它仍然会失真。

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);
}

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