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

我遇到了一个尴尬的情况。我有这样的形象：在浏览器中缩放圆形图像 - 适用于一幅图像，不适合2幅图像

enter image description here

此图像看起来在浏览器尖锐，如果我使用此代码：

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

但外表光滑，当我使用此代码：

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

所以我想问题是多个图像导致这个问题，如果我只显示一个它看起来很顺利。但问题是为什么？

的清晰图像：

enter image description here

平滑图像：

enter image description here

来源

2014-10-20 paulalexandru

生成的html有什么区别？你的第一个代码中还有一个输入错误'editjpg' – Luceos 2014-10-20 11:50:26

父元素有多宽，你显示了多少图像？我的猜测是，这些图像一起对父母身体来说太宽了。这绝对是一个html问题，与blade，laravel，src或任何其他标签无关。 – Luceos 2014-10-20 12:04:36

尝试把它们放在一个完整的html页面（与等），看看会发生什么。 – tacone 2014-10-20 13:01:53

因为你首先想到的是刀片的故障：

这是雷尔刀片可能会导致显示图像出现任何问题。刀片只是生成HTML，如果它与HTML相同，你想实现它不是刀片故障。

您应该看看其他问题（容器宽度），图像之间的额外空间，如果它生成良好的HTML，则不会在Blade本身中看到问题。

编辑

我不知道为什么会发生，但我可以肯定它会发生。但经过一些刷新后，它在我的Firefox中再次显得很好。可能的解决方案：

创建将30PX图像文件，这样就不需要设置width属性
或先尝试扩展您的图像到其他宽度 - 我还没有尝试过，但像本身是118px宽，当你试图将其扩展到30像素，您3,93333比，你可以尝试将其转换在某些图形程序120像素，则比率将是4

EDIT2

我已经检查了上面，只有第一个解决方案将工作。您需要创建具有确切尺寸的图像，并且不要使用浏览器缩放。看起来浏览器无法处理缩放如此之好，因此对于圆形，您将看到一些您不想要的效果，因此您需要在图形程序中准备图像。

来源

2014-10-20 11:54:18

@paulalexandru没有必要尝试任何东西，这只是逻辑和理由。 Blade只是一个模板引擎，它使得代码/标记的创建变得更容易，更易读。但最终，它们都会编译成相同的代码/标记，而不使用模板引擎。它不会让你的输出看起来不同，只是代码。所以它没有任何可能与Blade有任何关系。而且，正如你自己所说的那样，输出代码/标记没有任何区别。而刀片与标记的解释无关，这是您的浏览器的工作。 – Quasdunk 2014-10-20 12:11:46

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

回答

相关问题