在浏览器中缩放圆形图像 - 适用于一个图像，不适用于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只生成HTML，如果它与你想要实现的HTML相同，那就不是Blade故障。

你应该更好地看看其他问题（容器宽度），图像之间的额外空间，如果它生成了良好的HTML，就不会在Blade本身出现问题。

修改

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

• 创建30px的图像文件，这样您就不需要设置width属性
• 或尝试首先将图像缩放到其他宽度 - 我没有尝试过但图像本身是118px宽度，当你尝试将其缩放到30px时，你的3,93333比例，你可能会尝试将它在某个图形程序中转换为120px，然后比例为4.

<强> EDIT2

我已经检查过，只有第一个解决方案可行。您需要创建具有精确尺寸且不使用浏览器缩放的图像。似乎浏览器无法处理如此好的缩放，因此对于圆圈，您将看到一些您不想要的效果，因此您需要在图形程序中准备图像。