如何阻止网络浏览器调整图像大小？

Question

我希望我的图像显示得和我的操作系统上显示的一样清晰。我发现，如果我在 html 图像标签中指定图像的原始大小并不重要，Firefox 和 Chromium 会将其显示得更大，并且由于这种模糊性。

这就是发生的事情：

左图是网络浏览器上显示的图像。正如您使用像素屏幕标尺所看到的，它的宽度为 200 像素。右侧的图像是我使用操作系统图像查看器以 100% 大小查看的原始图像。您可以在属性中看到图像为 200 像素 x 200 像素。问题是，我必须在 HTML 中指定较小的图像大小，以便浏览器将其显示为原始大小，以便渲染时不会模糊。你可以看到我的html指定了142px的宽度和高度。

我认为这种浏览器行为是完全错误的，它不应该像这样工作，但我不希望这种情况发生改变，这是令人悲伤的。那么，你如何处理这种情况呢？有没有办法在 HTML 中编写一些内容（例如在标头中）以使浏览器以 100% 大小渲染图像？怎么办？

这是我在浏览器上以 280 像素显示的“200px”图像：

Answer 1

尝试使用这个，这可能会起作用，你只需要在 HTML 代码中使用它。

 <img src"200px.jpg" style="width:142px;height:142px;">

Answer 2

我也遇到了同样的问题，沮丧地拔头发。作为一个从 20 世纪 90 年代开始编写网站代码的人（实际上），我习惯于完全控制页面的外观。我寻找了很长时间并尝试了我能找到的一切，但都无济于事。我最终找到了这篇文章，其中包含一个对我有用的解决方案：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=1,height=device-height" />

这会覆盖浏览器以您自己的缩放设置 1.0 默默执行的任何图形缩放（通常为 1.25）。这对我有用，我希望对你也有用。看到我的图形在其原始分辨率下像素完美，真是太令人满意了。

Answer 3

不要在 HTML 中指定宽度和高度，而是使用 CSS 来指定图像的宽度和高度。 （下面的示例。下面that是该示例的屏幕截图（img 由 devtools 突出显示。）

img {
  height: 142px;
  width: 142px;
}

<img src="http://teamcooper.co.uk/wordpress-content/uploads/2012/02/200px-HTML5-logo.svg_.png">
<!-- Note that the original dimensions of this image are 200x200 -->

Answer 4

尝试使用CSS，这样你就可以使用它，这可能会解决你的问题。仅供参考，您需要调整宽度和高度％，以便它符合您的喜好。此外，您还需要更改底部和右侧的数字，以便它们位于页面上您希望它们出现的位置。

img{
  display:block;
  position:absolute;
  bottom:0;
  right:0;
  width:20%;
  height:20%;
}

Answer 5

您确定将浏览器设置为以 100% 比例显示吗？我怀疑您可能将浏览器“缩放”了，导致这种情况发生。在我的系统上，执行您正在执行的操作确实会以正常 (200x200) 尺寸显示图像。