为什么单击放大按钮后此图像会变得更清晰，但在默认缩放时会更模糊

Question

http://www.loftuspeak.com.au/wp-content/uploads/2017/07/Loftus-Peak-Logo-Sharp-Ribbon.png

有人可以向我解释为什么在默认缩放时它看起来很模糊，然后在单击 + 缩放后它变得更清晰。它在我的网站上以模糊的默认缩放显示，有没有办法让它默认更清晰的缩放？

Answer 1

放大时图像会变得更清晰，因为图像占用更多像素。缩小时图像会变得更加模糊，因为它占用的像素更少。

您可以通过以下方式使图像更清晰：

1. 放大图像文件。在 Photoshop 或 Paint.net 中打开图像并扩展图像。

2. 在 HTML 中，使图像小于实际尺寸。例如，如果您将图像保存为 1000 x 1000 像素，请使 html 如下所示：

   <img src="image.png" width="500" height="500" />

   如您所见，在HTML中，我嵌入的图像只有其实际大小的一半。这意味着图像将被迫压缩并保持高质量。

Answer 2

因为它在未缩放时不在正常宽高比中。

如果你想让它每次都是形状。您必须输入最大宽度为 100% 且高度为 auto的div。