在浏览器中缩放圆形图像 - 适用于一张图像，不适用于 2 张图像

Question

我遇到了一个尴尬的情况。我有这张图片：

如果我使用此代码，此图像在浏览器中看起来很清晰：

<img width="30" src="img/add.jpg" /><img width="30" src="img/add.jpg" />

但是当我使用这段代码时看起来很流畅：

<img width="30" src="img/add.jpg" />

所以我想问题是多张图片会导致问题，如果我只显示一张它看起来很流畅。但问题是为什么？

清晰的图像：

平滑的图像：

Answer 1

因为你一开始以为是 Blade 故障：

Blade 确实不可能导致显示图像出现任何问题。 Blade 只是生成 HTML，如果它与您想要实现的 HTML 相同，则不是 Blade 错误。

你应该看看其他问题（容器宽度），图像之间的额外空间，如果 Blade 本身生成的 HTML 很好，则不要看它本身的问题。

编辑

我不知道它为什么会发生，但我可以确认它发生了。但经过一些刷新后，它在我的 Firefox 中再次看起来很好。可能的解决方案：

• 创建大小为 30 像素的图像文件，因此您无需设置 width 属性
• 或尝试先将您的图像缩放到其他宽度 - 我没有尝试过，但图像本身是 118px 宽度，当您尝试将其缩放到 30px 时，您的比例为 3,93333，您可能会尝试在某些图形程序中将其转换为 120px，则比例为 4。

EDIT2

我已经在上面检查过，只有第一个解决方案可以工作。您需要创建具有精确尺寸且不使用浏览器缩放的图像。看起来浏览器不能很好地处理缩放，所以对于圆圈你会看到一些你不想要的效果，所以你需要在图形程序中准备图像。