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

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，则不要查看 Blade 本身的问题。

编辑

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

• 创建 30 像素的图像文件，这样您就不需要设置 width 属性
• 或者尝试先将您的图像缩放到其他宽度 - 我没试过，但图像本身宽度为 118px，当您尝试将其缩放到 30px 时，您的比率为 3,93333，您可以尝试在某些图形程序中将其转换为 120px，则比例为 4。

EDIT2

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