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

Posted 2023-03-06

【中文标题】HTML img 扭曲，直到我突出显示图像

【英文标题】：HTML img distorted until I highlight the image

【发布时间】：2015-08-02 09:42:12

【问题描述】：

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

【问题讨论】：

哈哈哈@RiteshK 我们无法告诉我们的用户/客户使用什么浏览器。我一直在使用 Chrome 进行开发，但需要确保它支持所有/大多数浏览器

是否可以将高度和宽度声明为图像元素的属性，而不是在 css 中？

你应该使用 Photoshop 来调整你的图片大小，如果问题只发生在 Firefox 中，那是 Firefox 的一个错误

@MichaelCrawford - 试过了，但没有用。

也可以尝试不同版本的 Firefox。这并不意味着您不必找到解决问题的方法，但如果您能确定有效和无效的特定 FF 版本，您的隔离将有助于 Firefox 的开发人员解决问题。跨度>

【参考方案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);

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

【讨论】：

我试试这个，你能重新调整到一个特定的像素吗？

不幸的是，transform 是为其他事情而设计的，而不是像旋转等调整大小。认为这可能是一个值得的练习，看看是否每种形式的调整大小都让你感到痛苦。我同意其他人的观点，奇怪的是它只是一个浏览器。

这是 Firefox 和 ie。即更糟糕的是图像仍然失真

我相信它可能与浏览器后端的渲染有关。如果图像太大并且您尝试调整它的大小，那么它会变形。但是，如果您将图像保存为较小的分辨率，它似乎会以更好的质量调整大小。